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