简介

最近在项目中使用一款非常实用,功能齐全的富文本编辑器----Tinymce Editor

首先献出文档 -- 英文文档中文文档编辑器效果如图

编辑器含有付费插件及拓展服务,不过大部分功能都可以通过官方下载免费下载引入使用即可. 下面介绍编辑器的具体安装使用.

安装及使用

首先安装 npm install tinymce -S

其次根据项目的vue版本选择tinymce-vue版本,如果你使用的Vue3.0可直接

npm install @tinymce/tinymce-vue -S

使用Vue2.x的项目则需安装较低的版本,我在项目采用的版本是 "3.2.6"的版本,则安装

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

接下来在static新建tinymce文件夹创建以下文件夹,

下载tinymce完成后在node_modules中找到tinymce目录将目录中skins和plugins文件夹复制至我们新建的tinymce文件夹中,使用编辑器的主题样式及扩展插件,后续有需要使用到拓展插件和主题都可以下引入,文档中有提供更多实用的的插件可供参考地址

接着下载中文汉化包链接官方提供许多中汉化包,中文文档下载地址

胡扯完了下面继续正式使用,在创建的tinymce-editor组件中引入依赖

import tinymce from 'tinymce/tinymce' //tinymce默认hidden，
import Editor from '@tinymce/tinymce-vue' //编辑器引入
import 'tinymce/themes/silver/theme' //编辑器主题
import 'tinymce/icons/default' //引入编辑器图标icon
复制代码

在main.js中注册tinymce-editor组件,方便使用,下面继续初始化配置

<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled"></Editor>
复制代码

init: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js', //汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', //皮肤
        plugins: this.plugins, //插件
        //工具栏
        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, //隐藏右下角技术支持
      }
复制代码

这里配置一些常用的插件及拓展插件,如不需要删除即可,引入方式例如

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' 
复制代码

props: {
    //内容
    value: {
      type: String,
      default: '',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //插件
    plugins: {
      type: [String, Array],
      default: 'advlist autolink link image lists charmap table fullscreen imagetools 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',
    },
    
    //监听内容变化
    value(newValue) {
      this.myValue = newValue || ''
    },
复制代码

最后在mounted中初始化配置,注意一定得往init函数传入传值,且不能为空(不要问为甚,问就是报错)

mounted() {
    tinymce.init({})
},
复制代码

最后,大功告成,展示下买家秀~

自定义操作

在项目使用中上传图片,一般富文本会转换base64格式存储,这里我们使用上传服务端使用后服务端图片地址的方式,官方也提供的自定义上传的方式,具体参考文档

上传图片及文件都可以通过提供的方法做自定义操作,通过上传将图片至后端返回图片地址插入富文本,(由于编辑器本身使用的上传需要手动输入图片路径这点使用体验并不好zz,惨遭吐槽)

tips:使用file_picker_callback这里方法便可以采用选择文件及拖动上传的方式具体实现,上代码

images_upload_handler: function(blobInfo, success, failure) {
          // 默认插入base64方式
          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)
          console.log(blobInfo, 'blobInfo')
          const file_type = blobInfo.blob().type
          const name = blobInfo.filename && blobInfo.filename() || blobInfo.blob().name
          //格式校验
          const isAccept = file_type === 'image/jpeg' || file_type === 'image/png' || file_type === 'image/GIF' || file_type === 'image/jpg' || file_type === 'image/BMP';
          //大小校验
          if (blobInfo.blob().size/1024/1024>2) {
            failure("上传失败，图片大小请控制在 2M 以内")
            _this.$message.warning('上传失败，图片大小请控制在 2M 以内')
          } else if (!isAccept) {
            _this.$message.warning('图片格式错误')
            failure('图片格式错误')
          } else {
            //上传
            let formData = new FormData()
            // 服务端接收文件的参数名，文件数据，文件名
            formData.append('文件参数', blobInfo.blob(), name)
            这里调用你的上传方法将参数传递至后端(formData).then((result) => {
              // 这里返回的是你图片的地址
              success(result.url)
            }).catch(() => {
              failure('上传失败')
            })
          }
       }
复制代码