PHP如何搭建百度Ueditor富文本编辑器

怼烎@ 2023-07-11 11:07 150阅读 0赞

**下载UEditor**

官网：[下载地址][Link 1]

将下载好的文件解压到thinkphp项目中，本文是解压到PUBLIC目录下并改文件夹名称为ueditor

![2018921165526839.jpg?2018821165554][2018921165526839.jpg_2018821165554]![uploading.4e448015.gif][]转存失败重新上传取消![2018921165526839.jpg_2018821165554][]

**第一步 **引入javascript

在html中如入下面的js语句引入相关文件

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf-8"</code> <code>src</code><code>=</code><code>"__PUBLIC__/ueditor/ueditor.config.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt; </code> <code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf-8"</code> <code>src</code><code>=</code><code>"__PUBLIC__/ueditor/ueditor.all.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**第二步 **添加textare文本域并设置id值

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>textarea</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"content"</code> <code>id</code><code>=</code><code>"EditorId"</code> <code>placeholder</code><code>=</code><code>"请输入内容"</code><code>&gt;&lt;/</code><code>textarea</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**第三步 **初始化UEditor编辑器

在html代码中添加下面的代码初始化UEditor编译器

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>&lt;script type=</code><code>"text/javascript"</code> <code>charset=</code><code>"utf-8"</code><code>&gt;</code><code>//初始化编辑器 </code> <code>&nbsp;&nbsp;&nbsp;</code><code>window.UEDITOR_HOME_URL = </code><code>"__PUBLIC__/ueditor/"</code><code>;</code><code>//配置路径设定为UEditor所放的位置 </code> <code>&nbsp;&nbsp;&nbsp;</code><code>window.onload=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.UEDITOR_CONFIG.initialFrameHeight=600;</code><code>//编辑器的高度 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.UEDITOR_CONFIG.initialFrameWidth=1200;</code><code>//编辑器的宽度 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>editor = </code><code>new</code> <code>UE.ui.Editor({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageUrl : </code><code>''</code><code>, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fileUrl : </code><code>''</code><code>, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imagePath : </code><code>''</code><code>, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filePath : </code><code>''</code><code>, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageManagerUrl:</code><code>''</code><code>, </code><code>//图片在线管理的处理地址 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageManagerPath:</code><code>'__ROOT__/'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}); </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>editor.render(</code><code>"EditorId"</code><code>);</code><code>//此处的EditorId与&lt;textarea name="content" id="EditorId"&gt;的id值对应 &lt;/textarea&gt; </code> <code>&nbsp;&nbsp;</code><code>} </code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**第四步 **设置图片上传路径

UEditor编辑器的默认图片上传路径是根目录下/ueditor/php/upload/image/目录，没有这个目录会自动创建，如果要自定义图片上传路径，可以在ueditor/php/config.json文件中12行处修改。

最后贴上完整的html代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 </td> 
 <td> <code>&lt;!DOCTYPE html&gt; </code> <code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt; </code> <code>&lt;</code><code>head</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;Document&lt;/</code><code>title</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf-8"</code> <code>src</code><code>=</code><code>"__PUBLIC__/ueditor/ueditor.config.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt; </code> <code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf-8"</code> <code>src</code><code>=</code><code>"__PUBLIC__/ueditor/ueditor.all.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt; </code> <code>&lt;/</code><code>head</code><code>&gt; </code> <code>&lt;</code><code>body</code><code>&gt; </code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>"__URL__/receiver"</code> <code>method</code><code>=</code><code>"post"</code> <code>accept-charset</code><code>=</code><code>"utf-8"</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>textarea</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"content"</code> <code>id</code><code>=</code><code>"EditorId"</code> <code>placeholder</code><code>=</code><code>"请输入内容"</code><code>&gt;&lt;/</code><code>textarea</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value</code><code>=</code><code>"提交"</code><code>&gt; </code> <code>&nbsp;</code><code>&lt;/</code><code>form</code><code>&gt; </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;</code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;//初始化编辑器 </code> <code>&nbsp;&nbsp;</code><code>window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置 </code> <code>&nbsp;&nbsp;</code><code>window.onload=function(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var editor = new UE.ui.Editor({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageUrl : '', </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fileUrl : '', </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imagePath : '', </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filePath : '', </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageManagerUrl:'', //图片在线管理的处理地址 </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageManagerPath:'__ROOT__/' </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}); </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>editor.render("EditorId");//此处的EditorId与&lt;</code><code>textarea</code> <code>name</code><code>=</code><code>"content"</code> <code>id</code><code>=</code><code>"EditorId"</code><code>&gt;的id值对应 &lt;/</code><code>textarea</code><code>&gt; </code> <code>&nbsp;&nbsp;</code><code>} </code> <code>&lt;/</code><code>script</code><code>&gt; </code> <code>&lt;/</code><code>body</code><code>&gt; </code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

效果图

![2018921165437755.jpg?2018821165459][2018921165437755.jpg_2018821165459]![uploading.4e448015.gif][]转存失败重新上传取消![2018921165437755.jpg_2018821165459][]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

*  [ThinkPHP中使用Ueditor富文本编辑器][ThinkPHP_Ueditor]
 *  [ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法][ThinkPHP]

[Link 1]: https://ueditor.baidu.com/website/download.html
[2018921165526839.jpg_2018821165554]: https://files.jb51.net/file_images/article/201809/2018921165526839.jpg?2018821165554
[uploading.4e448015.gif]: https://csdnimg.cn/release/mp/img/uploading.4e448015.gif
[2018921165437755.jpg_2018821165459]: https://files.jb51.net/file_images/article/201809/2018921165437755.jpg?2018821165459
[ThinkPHP_Ueditor]: https://www.jb51.net/article/71854.htm
[ThinkPHP]: https://www.jb51.net/article/53437.htm