vite+vue2项目中使用tinymce的记录

安装依赖

首先，使用pnpm安装了tinymce和@tinymce/tinymce-vue的特定版本,用来搭配vue2.7.16和vite：

bash 复制代码

pnpm install "@tinymce/tinymce-vue": "3.2.6" "tinymce": "5.1.1"

复制tinymce到public文件夹

为了确保tinymce的资源文件（如皮肤、插件等）能够正确加载，将tinymce从node_modules中复制一份到public文件夹。

创建tinymce-editor组件

创建了一个名为tinymce-editor的Vue组件，并在其中引入了必要的tinymce插件和主题。组件代码如下：

html 复制代码

<template>
    <div class="tinymce-editor">
        <Editor api-key="gjt7ov81xak1la48n91n9jiskcuny5ka65kq24uzxp058rum" v-model="myValue" :init="init" :disabled="disabled"></Editor>
    </div>
  </template>
  <script>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden,
import Editor from '@tinymce/tinymce-vue' //编辑器引入
import 'tinymce/themes/silver/theme' //编辑器主题
// import 'tinymce/icons/default/icons' //引入编辑器图标icon 

// import 'tinymce/models/dom/model'

// import 'tinymce/plugins/textcolor'//颜色
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/wordcount' // 字数统计
import 'tinymce/plugins/table'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'

// import 'tinymce/plugins/imagetools' ;
export default {
    components: {
      Editor
    },
    props: {
    //内容
    value: {
      type: String,
      default: '',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //插件
    plugins: {
      type: [String, Array],
      default: 'advlist autolink link image lists charmap table fullscreen  preview',
    },
    //工具栏
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  formatselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists image | fullscreen | preview',
    },
},
    
    
    data() {
      return {
        init: {
            //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        content_css: 'tinymce/skins/content/default/content.css',
        selector: '#tinymce',
        language_url: 'tinymce/langs/zh_CN.js', //汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide', //皮肤
        plugins: this.plugins, //插件

        menubar: 'edit insert view format table ', //menubar（1级菜单）
        //工具栏
        toolbar: this.toolbar,
        toolbar_location: '/',
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
        // font_formats: fonts.join(';'),//引入字体如['宋体=宋体','微软雅黑=微软雅黑'],
        height: 500, //高度
        placeholder: '请输入内容',
        branding: false, //隐藏右下角技术支持
        
        // 图片上传
        paste_data_images: true, // 允许粘贴图像
        images_reuse_filename:false, //使用图像的实际文件名
        automatic_uploads: true,
        file_picker_types: "image",
        images_upload_handler: (blobInfo, success, failure) => {
          // 调用了一个公共函数，会返回上传好的图片地址
          uploadFile({ filename: blobInfo.filename(), blob: blobInfo.blob() })
            .then((res) => {
              success(res);
            })
            .catch((err) => {
              console.debug(err);
              failure(err);
            });
        },
      },

        myValue: this.value,
      };
    },
    mounted() {
      tinymce.init({});
    },
    methods: {
      calcWidth() {
        return document.body.clientWidth / 2 + "px";
      },
      
    },
    watch: {
      //监听内容变化
    value(newValue) {
      this.myValue = newValue || ''
    },
    myValue(newValue) {
        this.$emit("input", newValue);
      }
      
    }
  }
  </script>

在组件中，您使用了v-model来绑定编辑器的内容，:init属性用于传递编辑器的配置，包括插件、工具栏、语言等设置。此外，您还定义了一个images_upload_handler函数来处理图片上传。

在页面中使用tinymce-editor组件

在您的页面中，您使用了el-form组件来构建表单，并在其中使用了editor-vue组件（假设这是您对tinymce-editor组件的局部注册名称）来集成tinymce编辑器。您通过:value属性绑定表单数据，并使用@input事件监听编辑器内容的变化，以更新表单数据。

html 复制代码

<el-form :model="addform" :rules="rules" ref="addform">
  <!-- ... 其他表单字段 -->
  <el-form-item label="工作内容" :label-width="formLabelWidth" prop="situationText">
    <editor-vue class="editor" :value="addform.situationText" @input="(res)=> addform.situationText = res"></editor-vue>
  </el-form-item>
  <!-- ... 其他表单字段 -->
</el-form>