vue2.x项目中使用富文本编辑器

vue2.x项目中使用tinymce富文本编辑器

项目的后台最开始使用的是百度的富文本编辑器来排版文案的，后面UMeditor没有维护了。想换一个编辑器，网上大家推荐使用tinymce这个富文本编辑器，

现在记录一下使用的过程，我的项目是用的vue2.6的版本。

中文文档手册

使用过程：

1.下载tinymce的相关依赖包,因为我的项目vue2版本，下载依赖包要指定版本

npm add tinymce -S
npm add @tinymce/tinymce-vue@3.0.1 -S

2.在项目的main.js中全局引入

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

3.复制文件

将tinymce 目录从node_modules 拷贝到public目录下，并且在tinymce下新建一个 langs目录，将下载好的语言包zh-CN.js 放进去

4.开始在组件中使用

      <el-form-item label="新闻主体" prop="content">
        <div class="tinymce-editor">
          <div id="tinymceToolbar"></div>
          <vue-tinymce ref="editor" class="editor overflow-scroll" v-model="content" :setting="setting" />
        </div>
      </el-form-item>

编辑器设置

      
 components: {
    tinymce
  },
 data() {
    return {
        content: '', 
    }
  },
// 编辑器设置
      setting: {
        inline: false,  // 设置内敛模式
        icons: 'custom',
        toolbar: //工具栏
          'code undo redo restoredraft | cut copy paste pastetext | bullist numlist| forecolor backcolor bold italic underline strikethrough link anchor fullscreen preview|lineheight image  axupimgs   media|alignleft aligncenter alignright alignjustify outdent indent indent2em hr| pagebreak insertdatetime  table  charmap emoticons  |styleselect |formatselect |fontselect |fontsizeselect |blockquote subscript superscript removeformat ',

        toolbar_drawer: 'wrap', // 工具栏模式，这里是滑行模式（当屏幕过小时，多余的工具会隐藏，点击更多按钮会出现其他工具，这里配置出现的特效）
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
         //对应的插件
        plugins: 'print preview searchreplace autolink directionality visualblocks  visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave  indent2em autoresize  axupimgs ',
        // 需要用到的功能插件，如链接，列表等等
        language: 'zh_CN', // 语言，汉化
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        resize: false, // 是否可以缩放编辑器
        elementpath: false, // 在编辑器底部的状态栏中禁用元素路径。
        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面
        custom_ui_selector: 'body', // 聚焦的元素
        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除
        init_instance_callback: editor => {
          editor.focus() // 初始化聚焦，让内联模式的编辑器工具显示
        },
        textpattern_patterns: [
          { start: '*', end: '*', format: 'italic' },
          { start: '**', end: '**', format: 'bold' },
          { start: '#', format: 'h1' },
          { start: '##', format: 'h2' },
          { start: '###', format: 'h3' },
          { start: '####', format: 'h4' },
          { start: '#####', format: 'h5' },
          { start: '######', format: 'h6' },
          { start: '1. ', cmd: 'InsertOrderedList' },
          { start: '* ', cmd: 'InsertUnorderedList' },
          { start: '- ', cmd: 'InsertUnorderedList' }
        ],
        min_height: 800, //高度
        width: 760,
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
        font_formats: '微软雅黑;宋体;黑体;仿宋;楷体;隶书;幼圆',
        language: 'zh_CN', // 语言，汉化
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        resize: true, // 是否可以缩放编辑器
        elementpath: true, // 在编辑器底部的状态栏中禁用元素路径。
        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面
        custom_ui_selector: 'body', // 聚焦的元素
        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除
        init_instance_callback: editor => {
          editor.focus() // 初始化聚焦，让内联模式的编辑器工具显示
        },
         //自定义上传图片的路径
        images_upload_handler: (blobInfo, success, failure) => {
          const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP';
          if (blobInfo.blob().size / 1024 / 1024 > 2) {
            this.$message("上传失败，图片大小请控制在 2M 以内")
          } else if (blobInfo.blob().type == isAccord) {
            this.$message('图片格式错误')
          } else {
            let formData = new FormData()
            let file = blobInfo.blob()
            // 服务端接收文件的参数名，文件数据，文件名
            formData.append('file', file, file.name)
              //调用上传图片的地址
            addNewsImg(formData).then(res => {
              if (res.status == 200) {
                success(res.data.data[0].url) //返回的结果添加到回调函数中
              }
            })
          }
        },
      },
  watch: {
    //监听内容变化
    content(newValue, oldValue) {
      this.content = newValue || ''
    }
  },
  mounted() {
    tinymce.init({
      selector: '#tinydemo',
      inline: false,
    });
  },