解决Pear-Admin-Layui中tinymce不支持同页面多个编辑器问题

孟帅
2021-06-09 16:45:15
大前端
Javascript Html

Pear-Admin-Layui中的tinymce框架作者对其进行了一些封装，导致其不支持同页面多个编辑器，反馈无果，于是上一下解决办法：

原版插件下载地址：

https://fly.layui.com/extend/tinymce/

https://gitee.com/chick1993/layui-tinymce

下载成功以后将其中的tinymce目录覆盖到框架目录：/static/admin/component/pear/modules
对tinymce.js根据自己需求做适当修改，以下是我的修改片段：

    //  ----------------  以上代码无需修改  ----------------
    var plugin_filename = 'tinymce.min.js'//插件路径，不包含base_url部分
    var settings = {
        base_url: modPath
        , images_upload_url: '/admin/api/upload'//图片上传接口，可在option传入，也可在这里修改，option的值优先
        , language: 'zh_CN'//语言，可在option传入，也可在这里修改，option的值优先
        , response: {//后台返回数据格式设置
            statusName: response.statusName || 'code'//返回状态字段
            , msgName: response.msgName || 'msg'//返回消息字段
            , dataName: response.dataName || 'data'//返回的数据
            , statusCode: response.statusCode || {
                ok: 20000//数据正常
            }
        }
        , success: function (res, succFun, failFun) {//图片上传完成回调 根据自己需要修改
            if (res[this.response.statusName] == this.response.statusCode.ok) {
                succFun(res.data.url); //指向图片地址
            } else {
                failFun(res[this.response.msgName]);
            }
        }
    };
    //  ----------------  以下代码无需修改  ----------------

3.使用方法。这里只是片段，可以结合自己实际情况参考试用：

//容器初始化

<script>
    var editorArray = [];
    var editorObj = [];
</script>

//渲染编辑器，这里如果是多个话  只需要重复加载下方代码即可
<textarea id="unit-editor-{{$list['name']}}" >{{$list['value']}}</textarea>
<script>
    let {{$list['name']}} = null;
    editorArray.push("{{$list['name']}}");
    editorObj.push("{{$list['name']}}");
    layui.use(['tinymce'], function () {
        let tinymce = layui.tinymce;
        editorObj.{{$list['name']}} = tinymce.render({
            elem: "#unit-editor-{{$list['name']}}",
            height: 400
        });
    })
</script>
//end

//获取编辑器内容
<script>
layui.use(['tinymce'], function () {
    let tinymce = layui.tinymce;
    
    if (editorArray.length > 0) {
        for (i = 0; i < editorArray.length; i++) {
            let key = editorArray[i];
            console.log('key:' + editorArray[i]);
            let content = tinymce.get('#unit-editor-'+key).getContent();
            console.log('content :' + content );
        }
    }
});
 
</script>

效果图：

鼎云博客