Tinymce实现不可编辑状态

Ambition-do it

已于 2022-07-18 16:52:31 修改

阅读量1.3k

点赞数

文章标签：大数据

于 2022-07-18 16:45:57 首次发布

本文链接：https://blog.csdn.net/weixin_46753476/article/details/125854841

版权

文本编辑器禁用 Tinymce实现不可编辑状态

最近遇到了一个需求，指定某个Tinymce控件不可编辑。在Tinymce官方文档中找了好久没有可以设置为不可编辑的配置。于是换了个思路，使用遮罩层。没有什么是遮罩层搞不定的！

动态绑定class属性，当点击详情按钮的时候，文本编辑器不能编辑; 当点击编辑按钮时，文本编辑器可以编辑和修改。

<div :class="[showMethod?'disable':'']">
            <Tinymce ref="editor" v-model="formData.announcement" :height="300" />
          </div>

<style>
.disable{
    position:relative;
    left:0;
    top:0;
    opacity:.5;
    width:100%;
    height:300rpx;
    background:#000;
    z-index:998;
    /*pointer-events: none; 是可以点击下面的事件，但是因为div是包着tinymac的，所以无效 */
    pointer-events: none;
  }
</style>