222222
Menu

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

发布时间:2018-09-11 10:39:37作者:热度: 541 ℃

下载链接在文章结束的位置

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

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

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

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

但是实用啊~~  同志们

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

我的如下图


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

3:再common.php中建立函数


具体函数如下

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

    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
    });
</script>
EOT;
echo $str;



}


大家也可以自行修改!

4:实用方法;

{:ueditor('content')}


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


下面是我的ueditor的压缩包!

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

软件下载链接
点击下载(1积分) 如何下载 积分获取攻略

下载说明:本站软件全部都是由个收集,绝对无毒无公害!如若有侵权或,请联系qq571031767进行删除!
软件1群:209183654     2群:524440238    3群:397053211    4群:684245561

米醋儿 micuer.com

  1. QQ3群:397053211
  2. QQ2群:524440238
  3. QQ1群:209183654
  4. 一键关注微博

旗下网站以及工具

    米醋儿TV 免费领券网
    程序员在线工具箱
    思琪导购网
    网络骗子曝光平台

友情连接