tp5中如何把百度富文本编辑器封装成插件的方式调用，tp3可借鉴思路

tp5中如何把百度富文本编辑器封装成插件的方式调用，tp3可借鉴思路


	在实际开发中，富文本编辑器的使用不可或缺！


	使用频率也非常非常的高！但是每一次引用，都重新写一大推的js去调用又显得麻烦！


	看cms框架中都将其封装成插件或者函数的形式调用！于是自己也动手写了个最笨的办法！


	但是实用啊~~&nbsp; 同志们


	1：下载并布局富文本编辑器


	我的如下图


	<img src="/data/upload/editer/image/2018/09/11/5b97285ea298b.png" alt="" /> 



	2：修改富文本编辑器中的PHP上传文件[自己动手修改，或者到文末查看我分享的ueditor压缩包]


	3：再common.php中建立函数


	<img src="/data/upload/editer/image/2018/09/11/5b9728ea375e5.png" alt="" /> 



	具体函数如下


	
<pre class="prettyprint lang-js">
/**
 * @param $name
 * 快速引用百度富文本编辑器
 */
function ueditor($name){
 echo ' &lt;script type="text/javascript" charset="utf-8" src="//'.$_SERVER['HTTP_HOST'].'/static/ueditor/ueditor.config.js"&gt;&lt;/script&gt;';
 echo ' &lt;script type="text/javascript" charset="utf-8" src="//'.$_SERVER['HTTP_HOST'].'/static/ueditor/ueditor.all.min.js"&gt; &lt;/script&gt;';
// &lt;!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--&gt;
// &lt;!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--&gt;
 echo '&lt;script type="text/javascript" charset="utf-8" src="//'.$_SERVER['HTTP_HOST'].'/static/ueditor/lang/zh-cn/zh-cn.js"&gt;&lt;/script&gt;';
 echo '&lt;textarea id="'.$name.'" name="'.$name.'" type="text/plain" style="width:1024px;height:500px; z-index: 1;margin-top: 100px;"&gt;&lt;/textarea&gt;';
$str = &lt;&lt;&lt;EOT
 &lt;script type="text/javascript"&gt;

var ue = UE.getEditor('{$name}', {
        toolbars: [
        [
            'source', //源代码
//            'anchor', //锚点
            'undo', //撤销
            'redo', //重做
            'bold', //加粗
//            'indent', //首行缩进
//            'snapscreen', //截图
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
//            'subscript', //下标
//            'fontborder', //字符边框
//            'superscript', //上标
            'blockquote', //引用
//            'pasteplain', //纯文本粘贴模式
//            'horizontal', //分隔线
//            'time', //时间
//            'date', //日期
//            'insertrow', //前插入行
//            'insertcol', //前插入列
//            'mergeright', //右合并单元格
//            'mergedown', //下合并单元格
//            'deleterow', //删除行
//            'deletecol', //删除列
//            'splittorows', //拆分成行
//            'splittocols', //拆分成列
//            'splittocells', //完全拆分单元格
//            'deletecaption', //删除表格标题
            'inserttitle', //插入标题
//            'mergecells', //合并多个单元格
//            'deletetable', //删除表格
//            'insertparagraphbeforetable', //"表格前插入行"
            'insertcode', //代码语言
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'customstyle', //自定义标题
//            'edittable', //表格属性
//            'edittd', //单元格属性
            'link', //超链接
            'unlink', //取消链接
//            'gmap', //Google地图
//            'help', //帮助
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'fullscreen', //全屏
//            'directionalityltr', //从左向右输入
//            'directionalityrtl', //从右向左输入
//            'rowspacingtop', //段前距
//            'rowspacingbottom', //段后距
//            'pagebreak', //分页
//            'insertframe', //插入Iframe
//            'imagenone', //默认
//            'imageleft', //左浮动
//            'imageright', //右浮动
            'attachment', //附件
            'imagecenter', //居中
            'wordimage', //图片转存
            'lineheight', //行间距
//            'edittip ', //编辑提示
//            'webapp', //百度应用
//            'touppercase', //字母大写
//            'tolowercase', //字母小写
            'background', //背景
//            'template', //模板
            'scrawl', //涂鸦
            'music', //音乐
//            'inserttable', //插入表格
//            'drafts', // 从草稿箱加载
            'charts', // 图表
            'formatmatch', //格式刷
            'print', //打印
            'preview', //预览
            'selectall', //全选
            'removeformat', //清除格式
            'cleardoc', //清空文档
            'searchreplace', //查询替换
            'map', //Baidu地图
            'emotion', //表情
            'spechars', //特殊字符
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'insertvideo', //视频
            'autotypeset', //自动排版
        ]
    ],
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });
&lt;/script&gt;
EOT;
echo $str;

}</pre>
 



	 



	大家也可以自行修改！


	4：实用方法；


	
<pre>{:ueditor('content')}</pre>
<img src="/data/upload/editer/image/2018/09/11/5b97293c40448.png" alt="" /> 



	 



	好了！这就是简易教程！里面最容易出现的问题就是js引用路劲不成功！这点针对你具体的项目，需要做具体的调整！


	 



	下面是我的ueditor的压缩包！


	下载需要1积分！注册免费送20积分！

注:原创不易,转载请注明出处( http://www.micuu.com/new/321.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

tp5中如何把百度富文本编辑器封装成插件的方式调用，tp3可借鉴思路

留言反馈