Thinkphp如何引入Ueditor富文本编辑器

本文小编以114好帮手的亲身的学习经验，分享tp5.1引入ueditor富文本编辑器的方法：


1、获取PHP版本的ueditor，下载地址：https://github.com/fex-team/ueditor

Thinkphp如何引入Ueditor富文本编辑器

进入ueditor github库，选择Tags,选择最新的V1.4.3.3版本Download，然后下载对应PHP版本

2、将下载的ueditor文件解压后，重命名为ueditor存储到public目录下。然后在template.php中配置__UEDITOR__'=>'/ueditor'

     通过以下形式在head头部引入ueditor相关js文件

1. <script type="text/javascript" src="__UEDITOR__/ueditor.config.js"></script>
   
2.         <script type="text/javascript" src="__UEDITOR__/ueditor.all.js"></script>

复制代码

3、在需要显示文本编辑窗的html代码位置，插入如下代码

1. <script id="editor" name="editor" type="text/plain" style="width:1024px;height:300">
   
2.   </script>

复制代码

这个script中间，可以通过数据获取的方式，获取已经在库的数据

在html尾部，引入ueditor实例化js

1. <script type="text/javascript">
   
2.   
   
3.   //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径)
   
4.   //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";  
   
5.    
   
6.   //实例化编辑器
   
7.   var ue = UE.getEditor('editor');
   
8.   
   
9.   function insertHtml() {
   
10.     var value = prompt('插入html代码', '');
    
11.     ue.execCommand('insertHtml', value)
    
12.   }
    
13.   function createEditor() {
    
14.     enableBtn();
    
15.     UE.getEditor('editor');
    
16.   }
    
17.   function getAllHtml() {
    
18.     alert(UE.getEditor('editor').getAllHtml())
    
19.   }
    
20.   function getContent() {
    
21.     var arr = [];
    
22.     arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    
23.     arr.push("内容为：");
    
24.     arr.push(UE.getEditor('editor').getContent());
    
25.     alert(arr.join("n"));
    
26.   }
    
27.   function getPlainTxt() {
    
28.     var arr = [];
    
29.     arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    
30.     arr.push("内容为：");
    
31.     arr.push(UE.getEditor('editor').getPlainTxt());
    
32.     alert(arr.join('n'))
    
33.   }
    
34.   function setContent(isAppendTo) {
    
35.     var arr = [];
    
36.     arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    
37.     UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    
38.     alert(arr.join("n"));
    
39.   }
    
40.   function setDisabled() {
    
41.     UE.getEditor('editor').setDisabled('fullscreen');
    
42.     disableBtn("enable");
    
43.   }
    
44.   
    
45.   function setEnabled() {
    
46.     UE.getEditor('editor').setEnabled();
    
47.     enableBtn();
    
48.   }
    
49.   
    
50.   function getText() {
    
51.     //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    
52.     var range = UE.getEditor('editor').selection.getRange();
    
53.     range.select();
    
54.     var txt = UE.getEditor('editor').selection.getText();
    
55.     alert(txt)
    
56.   }
    
57.   
    
58.   function getContentTxt() {
    
59.     var arr = [];
    
60.     arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    
61.     arr.push("编辑器的纯文本内容为：");
    
62.     arr.push(UE.getEditor('editor').getContentTxt());
    
63.     alert(arr.join("n"));
    
64.   }
    
65.   function hasContent() {
    
66.     var arr = [];
    
67.     arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    
68.     arr.push("判断结果为：");
    
69.     arr.push(UE.getEditor('editor').hasContents());
    
70.     alert(arr.join("n"));
    
71.   }
    
72.   function setFocus() {
    
73.     UE.getEditor('editor').focus();
    
74.   }
    
75.   function deleteEditor() {
    
76.     disableBtn();
    
77.     UE.getEditor('editor').destroy();
    
78.   }
    
79.    
    
80.   //提交方法
    
81.   function submitEditor()  {
    
82.     //此处以非空为例
    
83.     if(ue.hasContents()){
    
84.       ue.sync();    //同步内容
    
85.       document.MyForm.submit();
    
86.     }
    
87.   }  
    
88.    
    
89.   function disableBtn(str) {
    
90.     var div = document.getElementById('btns');
    
91.     var btns = domUtils.getElementsByTagName(div, "button");
    
92.     for (var i = 0, btn; btn = btns[i++];) {
    
93.       if (btn.id == str) {
    
94.         domUtils.removeAttributes(btn, ["disabled"]);
    
95.       } else {
    
96.         btn.setAttribute("disabled", "true");
    
97.       }
    
98.     }
    
99.   }
    
100.   function enableBtn() {
     
101.     var div = document.getElementById('btns');
     
102.     var btns = domUtils.getElementsByTagName(div, "button");
     
103.     for (var i = 0, btn; btn = btns[i++];) {
     
104.       domUtils.removeAttributes(btn, ["disabled"]);
     
105.     }
     
106.   }
     
107.   
     
108. </script>

复制代码

完成以上操作后，页面就出现了富文本编辑器窗口

点击阅读更多内容！

ueditor默认的设置，会将remote图片进行本地化，这样时间长了占用服务器空间。
取消远程图片本地化的方法：进入ueditor文件夹，打开ueditor.config.js文件，插入,catchRemoteImageEnable: false即可关闭远程图片本地化功能