Vue中使用Tinymce-edtio

Vue中使用Tinymec-edtio

一、资源下载
二、初始化组件
三、插件Plugins
四、上传图片

一、资源下载

tinymce 官方为 vue 项目提供了一个组件 tinymce-vue
使用npm安装

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

或使用yarn安装

yarn add  @tinymce/tinymce-vue -S
yarn add  tinymce -S

安装完成之后将 node_modules 中的 tinymce/skins 复制到public目录下，外层包一个tinymce文件方便识别

如果是使用 vue-cli 3.x 构建的项目，就放到 public 目录下
如果是使用 vue-cli 2.x 构建的项目，就放到 static 目录下

由于tinymec 默认为英文界面，需要安装一个中文包，将这个语言包放在之前publicb下的tinymce文件
在这里插入图片描述

二、初始化组件

在页面中引入一下文件

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme' //不引入主题会导致 Uncaught SyntaxError: Unexpected token < 报错
import Editor from '@tinymce/tinymce-vue'

tinymce-vue 是一个组件，需要在 components 中注册

expotr default{
	components: {
    	editor: Editor
 	 }
}

注册完组件后直接使用

<editor id='tinymce' v-model='content' :init='init'></editor>

tinymce-vue组件支持双向数据绑定，init为初始化配置，具体配置可参考文档

//这里是项目中所用到的一些配置
init: {
        language_url: '/tinymce/langs/zh_CN.js', //语言包地址
        language: 'zh_CN', //选择中文语言包
        skin_url: '/tinymce/skins/ui/oxide', //编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件
        height: 300, //高度设置
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu preview fullscreen', //tinymce插件
        toolbar:
          'fontselect fontsizeselect | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent blockquote | undo redo | link unlink image code | removeformat preview fullscreen', //菜单栏设置  使用  |  来分割
        branding: false, //去水印
        menubar: false, // 隐藏最上方menu
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        // 自定义上传图片事件，下面中会具体讲到
        images_upload_handler: (blobInfo, success, failure) => {}
      }

初始化配置完成后，需要在mounted中调用

//因为上面已经有了配置，所以这里不需要再配置，传入一个空对象即可
tinymce.init({})

三、插件Plugins

上面配置中有使用一些插件，因此在使用前需要导入一下插件

tinymce 通过添加插件 plugins 的方式来添加功能，上面配置以讲到

import 'tinymce/plugins/image' //图片
import 'tinymce/plugins/link' //链接
import 'tinymce/plugins/code' //源代码
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/lists' //列表
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount' //字数统计
import 'tinymce/plugins/textcolor' //文本颜色
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/preview' //预览
import 'tinymce/plugins/fullscreen' //全屏

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

四、上传图片

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但是一般来说前后端分离情况下，是不用后端配置的，因此需要我们自定义上传事件，tinymce提供了
images_upload_handler

images_upload_handler: (blobInfo, success, failure) => {
          const files = blobInfo.blob()
          let type = files.type
          if (!/^image\/\w+$/.test(type)) {
            Notice('warning', '请选择图片文件')
            return
          }
          if (files.size > 5242880) {
            Notice('warning', '图片太大了,请上传不大于5M的图片!')
          }
          upload('instrument_tpl_detail/', files, files.name, url => { //自己的接口请求函数
            success(url)
          })
 }

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息在这里插入图片描述
success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息