vue3.x集成TinyMce5.x 迁移

安装tinymce

npm install --save tinymce
npm install --save @tinymce/tinymce-vue

引入tinymce

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver' //编辑器主题，不引入则报错
import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标

引入插件

// 引入编辑器插件（基本免费插件都在这儿了）
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/autoresize' //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave' //自动存稿
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/code' //编辑源码
import 'tinymce/plugins/codesample' //代码示例
import 'tinymce/plugins/directionality' //文字方向
import 'tinymce/plugins/emoticons' //表情
import 'tinymce/plugins/fullpage' //文档属性
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help' //帮助
import 'tinymce/plugins/hr' //水平分割线
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/importcss' //引入css
import 'tinymce/plugins/insertdatetime' //插入日期时间
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/paste' //粘贴插件
import 'tinymce/plugins/preview' //预览
import 'tinymce/plugins/print' //打印
import 'tinymce/plugins/quickbars' //快速工具栏
import 'tinymce/plugins/save' //保存
import 'tinymce/plugins/searchreplace' //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import 'tinymce/plugins/tabfocus' //切入切出，按tab键切出编辑器，切入页面其他输入框中
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/template' //内容模板
import 'tinymce/plugins/textcolor' //文字颜色
import 'tinymce/plugins/textpattern' //快速排版
import 'tinymce/plugins/toc' //目录生成器
import 'tinymce/plugins/visualblocks' //显示元素范围
import 'tinymce/plugins/visualchars' //显示不可见字符
import 'tinymce/plugins/wordcount' //字数统计

拷贝skins

将node_modules/tinymce/skins 拷贝到 public/tinymce(这个目录自己新建)

定义组件props

export const EditorProps = {
    //插件
    plugins: {
        type: String,
        default: defaultPlugins
    },
    //工具栏
    toolBar: {
        type: String,
        default: yuqueToolbar
    },
    //菜单工具栏
    menuBar: {
        type: [String, Boolean],
        default: true
    },
    //是否禁用编辑
    disabled: {
        type: Boolean,
        default: false
    },
    //高度
    height: {
        type: Number,
        default: 400
    },
    //文章类容
    content: {
        type: String,
        default: ''
    },
}

设置几个默认插件 工具栏配置

//默认插件
export const defaultPlugins = 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image ' +
    'link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ';

//默认工具栏
export const defaultToolbar = 'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | ' +
    'alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | ' +
    ' blockquote subscript superscript removeformat | table image media charmap hr pagebreak insertdatetime print preview | ' +
    'code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs';

//博客的按钮
export const blogToolbar = 'fullscreen code | codesample  image table | forecolor backcolor bold italic underline strikethrough link anchor | formatselect fontselect fontsizeselect'

//模仿语雀做的一个排版
export const yuqueToolbar = 'fullscreen undo redo | formatselect fontsizeselect | bullist numlist | bold italic underline strikethrough | forecolor backcolor |  '
+' alignleft aligncenter alignright alignjustify outdent indent | link codesample  image table | preview code'

配置initconfig

const init = reactive({
      skin_url: baseUrl + 'tinymce/skins/ui/oxide', //皮肤：浅色
      content_css: baseUrl + 'tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
      height: height,//(props) 编辑器高度由调用者决定
      plugins: plugins,//(props)使用插件由调用者决定
      toolbar: toolBar,//(props)使用工具栏由调用者决定
      menubar: menuBar,//(props)是否使用菜单栏由调用者决定
      branding: false,
})

定义template

<editor id="tinymceEditor" v-model="contentValue" :init="init"></editor>

实现内容双向绑定

watch(() => props.content,(val) => {
    contentValue.value = val
})

watch(contentValue, (val) => {
    emit('update:content', val)
})

组件地址