Layui+TinyMCE编辑回显第一次能回显,关闭弹出层后再次打开就不能编辑,富文本支持从word复制内容

最新推荐文章于 2024-04-26 11:41:11 发布

原创

最新推荐文章于 2024-04-26 11:41:11 发布 · 1.8k 阅读

标签

#layui #前端

在Layui前端框架中使用TinyMCE富文本编辑器，遇到弹窗关闭后重新打开无法正常编辑的问题。解决方法是确保在打开弹窗时销毁并重新加载富文本容器。同时，为了支持从Word复制内容粘贴到富文本，需安装powerpaste插件并在初始化TinyMCE时引用。

前端框架使用的layui,富文本用的tinymce,项目中是在弹出新增或者修改页面的时候,才打开的富文本,所以我的富文本要在打开layui弹出页面后再加载出来.之所以关闭弹出层在打开不能使用,或者打开显示的内容一样,是因为富文本的容器没有销毁.所以要在调用方法的时候销毁容器.

新增的方法里面:

修改的方法里面:

重点是后面的方法,我把调用富文本的方法封装起来了,调用方法前先销毁容器,再创建.

/*tinymce富文本*/
function init_tiny_mce(content){
    //每次调用方法前,销毁tinymce容器
    if(tinymce.activeEditor!=null){
        tinymce.remove("textarea#substance");
    }
    tinymce.init({
        selector: 'textarea#substance',//绑定渲染区
        height: 600,
        readonly : 0,
        plugins: 'powerpaste importcss code table advlist fullscreen imagetools  textcolor colorpicker hr  autolink link image lists preview wordcount',
        toolbar: 'styleselect |  formatselect | fontsizeselect | forecolor backcolor

最低0.47元/天解锁文章