深圳网站建设 / 站内资讯 / 行业资讯 / 正文

PHP项目接入Ueditor富文本编辑器

来源： All文章

发布时间：2023-03-31 17:02:47

　　最近有个项目因为原项目的编辑器不符合客户的需求，所以需要更换一个其他的编辑器，按客户的需求是要接入百度Ueditor富文本编辑器。

　　在网上下载好文件，然后将下载好的文件解压到项目中，我这里是解压到PUBLIC目录下并改文件夹名称为ueditor第一步先引入javascript

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

　　scripttype=text/javascriptsrc=__LIB__/ueditor/ueditor.config.js？{$Think.NOW_TIME}/script

　　！--编辑器源码文件--

　　scripttype=text/javascriptsrc=__LIB__/ueditor/ueditor.all.js？{$Think.NOW_TIME}/script

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

　　textareaid=[id]name=[id]class=form-controlkindeditorstyle=height：400px;width：100%;[value]/textarea

　　第三步初始化UEditor编辑器

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

　　！--实例化编辑器--

　　scripttype=text/javascriptcharset=utf-8//初始化编辑器

　　window.UEDITOR_HOME_URL=__LIB__/ueditor/;//配置路径设定为UEditor所放的位置

　　window.onload=function(){

　　window.UEDITOR_CONFIG.initialFrameHeight='400';//编辑器的高度

　　window.UEDITOR_CONFIG.initialFrameWidth='100%';//编辑器的宽度

　　vareditor=newUE.ui.Editor({

　　imageUrl：''，

　　fileUrl：''，

　　imagePath：''，

　　filePath：''，

　　imageManagerUrl：''，//图片在线管理的处理地址

　　imageManagerPath：'/'

　　});

　　editor.render([id]);//此处的EditorId与textareaname=contentid=EditorId的id值对应/textarea

　　}

　　/script

　　我这里是直接集成在一个公共的页面里，方便调用第四步设置图片上传路径

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

　　效果图

　　这里的工具栏，我是根据需求进行了删减，删减位置在ueditor.config文件的第36行处删减；编辑器的高度一开始默认是根据内容高度延伸的，需要改成滚动条形式的话，在ueditor.config文件的第36行处修改autoHeightEnabled：true，true改为false，然后取消注释即可；

上一页：MVC架构网站的概述

下一页：如何给您的企业网站添加属于企业的个性，值得观看

* 文章来源于网络，如有侵权，请联系客服删除处理。