src/components/tinymce/index.vue

src/components/tinymce/index.vue

这个代码块是一个基于 Vue.js 的组件，用于集成 TinyMCE 富文本编辑器。以下是对代码块中各个部分的解释：

<template> 部分

<template>
  <div :class="{ fullscreen: fullscreen }" class="tinymce-container">
    <textarea :id="id" class="tinymce-textarea"></textarea>
  </div>
</template>

• 解释：
  • 使用了一个 div 容器来包裹一个 textarea 元素。
  • div 的类名根据 fullscreen 状态动态绑定，如果 fullscreen 为真，则添加 fullscreen 类。
  • textarea 元素的 id 属性是动态生成的，确保每个实例都有唯一的 ID。

<script> 部分

import toolbar from './toolbar';
import plugins from './plugins';
import styles from './style';
import remoteLoad from '@/utils/remoteLoad';
const {
    TinymceCDN } = require('@/plugins/cdn');

export default {
   
  name: 'tinymce',
  props: {
   
    height: {
   
      type: [Number, String],
      default: '500'
    },
    resize: {
   
      type: Boolean,
      default: true
    },
    value: {
   
      type: String,
      default: ''
    }
  },
  data() {
   
    return {
   
      id: 'editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''),
      firstInit: false,
      errorStatus: false,
      fullscreen: false
    };
  },
  mounted() {
   
    this.init();
  },
  methods: {
   
    async init() {
   
      try {
   
        await remoteLoad(TinymceCDN);
        if (window.tinymce) {
   
          this.initTinymce();
        } else {
   
          this.$message.error('加载资源失败');
        }
      } catch (error) {
   
        console.log(error);
        this.$message.error(error);
      }
    },
    initTinymce() {
   
      const that = this