在vue中使用tinymce编辑器

TinyMCE插件安装

vue3安装方法参考 https://www.tiny.cloud/blog/tinymce-vue-3-support/

npm install @tinymce/tinymce-vue -S

如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。
若没有注册、购买过服务，就直接下载TinyMCE。

npm install tinymce -S

安装成功之后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到static/tinymce目录下。
下载中文的语言包。并复制到static/tinymce目录下。

初始化

引入文件

import tinymce from 'tinymce/tinymce'
import editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/skins/ui/oxide/skin.css';//这里很重要，不引编辑器出不来

tinymce-vue是组件，需要在components中注册，才能使用。

<editor v-model="myValue" :init="init"></editor>

init是初始化配置项，具体API请参考官方文档。

init: {  
        language_url: '/static/tinymce/zh_CN.js',  
        language: 'zh_CN',  
        height: 300,   
        content_css:'/static/tinymce/skins/content/default/content.css',//这个也加上，不然会报错
        branding: false,  
        menubar: false,  
   }

自定义按钮

在init里配置setup

init: {
        language_url: "/static/tinymce/zh_CN.js",
        language: "zh_CN",
        height: 500,
        skin_url: "/static/tinymce/skins/ui/oxide",
        content_css: "/static/tinymce/skins/content/default/content.css",
        branding: false,
        plugins: "image",
        menubar: false,
        toolbar: "imageUpload",
        setup: (editor) => {//设置自定义功能的按钮
          editor.ui.registry.addButton("imageUpload", {//单个按钮，此处的imageUpload是该按钮的名称
            tooltip: "上传图片",
            icon: 'image',
            onAction: () => {
              //点击按钮执行的操作
              this.showImg = true;//我这边是展示一个选择图片的modal组件
              this.editor = editor;//把当前的编辑器保存下来
            }
          });
        }
      }

向编辑器插入内容

methods: {
    insertImage (imageList) {
      this.showImg = false;
      let insertHtml = "";
      imageList.map((item, index) => {
        insertHtml = insertHtml + "<img src=" + item + ">";
      });
      //向编辑器插入内容
      this.editor.execCommand('mceInsertContent', false, insertHtml);
    }
}

最后编辑于：2021.11.10 17:39:29