Thinkphp 文本編輯器

時間  2019-11-07
標籤 thinkphp 文本編輯器 欄目 PHP 简体版
原文   原文鏈接

文本編輯器:能夠從網上下載---ueditor文件夾裏面包含php和utf8-php兩個文件夾

平時使用時主要用到獲取內容和寫入內容兩個按鈕

獲取內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>
    <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
   <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

</head>

<body>
<div>
<!--文本編輯器顯示區域-->
    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script>
</div>
<div>
 <button onclick="getContent()">得到內容</button>
 <button onclick="setContent()">寫入內容</button>
 </div>
<div id="xianshi"></div>
</body>

<script type="text/javascript">
//實例化文本編輯器，這句話必須有
var ue = UE.getEditor('editor');
function getContent() {
    //主要做用語句    
    //在文本編輯器中寫入內容，點擊得到內容按鈕後，在xianshi<div>裏顯示內容
document.getElementById("xianshi").innerHTML = UE.getEditor('editor').getContent();
}
       
</script>
</html>
View Code

文本編輯器中寫入的內容：

 

xianshi<div>中現實的內容：

 

寫入內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>
    <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
   <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

</head>

<body>
<div>
<!--文本編輯器顯示區域-->
    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script>
</div>
<div>
 <button onclick="getContent()">得到內容</button>
 <button onclick="setContent()">寫入內容</button>
 </div>
<div id="xianshi"></div>
</body>

<script type="text/javascript">
//實例化文本編輯器，這句話必須有
var ue = UE.getEditor('editor');
       
function setContent(isAppendTo) {  
var str = "<p style='white-space: normal;'><span style='background-color: rgb(84, 141, 212);'>斯柯達晶高科的復活節</span><img src='http://localhost:8080/ueditor/php/upload/image/20160704/1467600934975616.png' title='1467600934975616.png' alt='6.png'></p><p style='white-space: normal;'><span style='text-decoration: underline; color: rgb(0, 176, 80);'><em>看電視劇趕快回家回家的撒</em></span></p><p><br></p>";
 //主要做用語句
UE.getEditor('editor').setContent(str, isAppendTo);
}
</script>
</html>
View Code

寫入內容前現實的內容：

獲取內容代碼加到對應的方法中，而後寫入內容，顯示同樣的內容：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程