tinymce编辑器切换可编辑或只读

tinymce编辑器切换编辑或只读

适用场景：某些情况下，我们可能需要设置tinymce编辑器只用于输出且不允许编辑，又或者我们可能会有一个按钮来控制tinymce编辑器从只读改为允许编辑。

---

引入tinymce编辑器

这里对tinymce的引入以及各种相关属性的设置，暂不做过多描述，贴点简单代码（主要是ref="docEditor"）。

<template>
  <div>
      <tinymce
    ref="docEditor"
    :readonly="!isEditing"
    v-model="content"
    />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
export default {
  components: {Tinymce },
}
</script>

---

添加按钮用于控制

这里添加了button按钮用于控制tinymce编辑器是只读/可编辑。
其中，isEditing是一个boolean变量值（初始值默认false），其值为true或false决定了按钮的样式，同时也是传入handleChange方法的参数。

  <div>
    <el-button :class="[isEditing? 'button':'button-to']" size="small" type="primary" @click="handleChange(isEditing)">
      编辑
    </el-button>
  </div>

<script>
export default {
  data() {
    return {
      isEditing: false,
    }
  }
}
</script>

---

调用方法

该方法根据传入的值是true或false，如果是true，则this.docEditor.mode.set('design')设置tinymce可编辑，否则this.docEditor.mode.set('readonly')设置只读。

    //切换只读/可编辑
    handleChange(isEdit){
      if(isEdit) {
        //tinymce编辑器可编辑
        this.docEditor.mode.set('design')
      } else {
        //tinymce编辑器只读
        this.docEditor.mode.set('readonly')
      }
    },