Tinymce实现不可编辑状态

最新推荐文章于 2024-06-03 15:34:03 发布

也•简

最新推荐文章于 2024-06-03 15:34:03 发布

阅读量3.2k

点赞数 4

分类专栏：前端文章标签： css elementui html

本文链接：https://blog.csdn.net/loveliqi/article/details/122057587

版权

前端专栏收录该内容

22 篇文章 4 订阅

订阅专栏

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

代码如下：

<div class="disable">
  <Tinymce ref="artistDes" v-model="temp.artistDes" :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>

pointer-events: none;指元素永远不会成为鼠标事件的target。