Vue爬坑之旅(二十六)：vue中使用tinymce-vue

tinymce-vue是一款强大的富文本编辑器

UI精美，功能模块多，可按需加载配置

github地址：tinymce-vue

demo查看

一、安装

"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.0.14",

下载的时候可以先在static下面建个目录tinymce，里面可以防止一些插件，语言包什么的

二、下载中文语言包

inymce提供了很多的语言包，这里我们下载中文语言包，下载完成后将其解压到static\tinymce目录下面，如上图

三、初始化

引入基本文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'

components中注册tinymce-vue才能使用

 配置表(部分常用)：

editorInit: {

        /**
         * 配置参数
         * @param {string/object} language_url 语言包文件地址
         * @param {string} language 设置语言包
         * @param {number} height 初始化高度
         * @param {string} plugins 使用插件名称
         * @param {string} toolbar 工具栏配置
         * @param {boolean} branding 是否显示右下角品牌名称
         * @param {boolean} resize 是否允许自由拖拽
         * @param {string} fontsize_formats 字号设置
         * @param {function} images_upload_handler 自定义图片上传回调
         */
        language_url: EditorCN,
        language: 'zh_CN',
        height: 390,
        plugins: 'link lists image code table wordcount advlist code lineheight fullscreen',
        toolbar: 'bold | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | lineheight | bullist numlist | outdent indent | image | fullscreen',
        branding: false,
        resize: false,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px',
        images_upload_handler (blobInfo, succFun, failFun) {
          console.log('上传图片')
          let formdata = new FormData()
          console.log('获取到的图片信息：' + blobInfo)
          // 插入图片
          succFun('https://my.weblf.cn/website/static/img/3.5cba2ca.jpg')
        }
      }

扩展插件

默认的编辑器只有基本功能，如果还需要上传图片，插入表格之类的功能就需要添加插件
如添加上传图片和插入表格的插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/table'

 引入后还需要再toolbar工具栏上添加相应的按钮

plugins: 'lists image media table textcolor wordcount contextmenu',
toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',

完整代码：