vue2 使用 tinymce富文本编辑器

注意：
在vue2中使用tinymce有版本限制的，最新版都是支持v3的，官方也说明了；
vue2中不能使用@tinymce/tinymce-vue 为4以上的版本；

使用步骤：

1、vue项目中安装 tinymce；
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

2、将富文本编译器封装成组件；
在src/components目录下新建一个tinymce文件夹（每个文件的代码在文章末尾提供）
在这里插入图片描述

3、将组件引入到页面中进行使用；
哪个页面使用富文本编译器就在哪个页面引入组件；

<tinymce 
  v-model="addContent"
  @input="(info) => tinymceInput(info)"
   id="tinymceId"
></tinymce>

import tinymce from '@/components/tinymce/index.vue' // 注意引入路径
components: { tinymce },

data () {
  return {
    addContent: '',
  }
},
methods: {
	tinymceInput (info) {
       console.log(info,'info------------');
     },
},

注意：可能会遇到的问题
import “tinymce/icons/default” 路径找不到需要升级tinymce版本
解决方法：
终端执行：npm i tinymce -S

代码：

index.vue

<template>
  <div class="tinymce-editor">
    <editor
      :id="id"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    ></editor>
  </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce'
import editor from '@tinymce/tinymce-vue'

// 引入富文本编辑器主题的js和css
import 'tinymce/skins/content/default/content.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' // 解决了icons.js 报错问题，不用定制icon可以忽略

// 编辑器扩展插件plugins
import 'tinymce/plugins/paste' // 粘贴插件
import 'tinymce/plugins/image' // 上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/code' // 源码
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/preview' // 预览

// import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/autoresize"; 
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/print";
import "tinymce/plugins/save";
import "tinymce/plugins/tabfocus";

// import 'tinymce/plugins/contextmenu'
// import "tinymce/plugins/imagetools";
// import "tinymce/plugins/autosave";
// import "tinymce/plugins/emoticons";
// import "tinymce/plugins/spellchecker";


import plugins from './plugins'
import toolbar from './toolbar'

export default {
  name: 'tinymce',
  components: { editor },
  props: {
    value: {
      // 默认的富文本内容
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    disabled: {
      // 禁用
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 语言包路径
        language: 'zh_CN', // 语言
        skin_url: '/tinymce/skins/ui/oxide', // 主题路径
        content_css: '/tinymce/skins/ui/oxide/content.css', // 为编辑区指定css文件,该参数的值是你的css文件路径，可使用绝对路径或相对路径。
        min_height: 80,
        // height: 500,
        // width: this.calcWidth(),
        plugins: plugins, // 指定需加载的插件
        toolbar: toolbar, // 自定义工具栏
        toolbar_mode: 'sliding', // 工具栏模式
        // paste_data_images: true, // 允许粘贴图片
        branding: false, // 不显示富文本支持方
        statusbar: false, // 隐藏状态栏
        menubar: false, // 禁用菜单栏
        theme: 'silver', // 默认主题
        placeholder: '请输入',
        fontsize_formats: "12px 14px 16px 18px 20px 22px 24px 36px 48px 56px 72px",
        font_formats: "宋体='宋体';仿宋='仿宋';微软雅黑='微软雅黑';楷体='楷体';隶书='隶书';幼圆='幼圆';Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Helvetica=helvetica;",
        content_style: `
        body { font-family:宋体,Arial,sans-serif; font-size:14px;line-height: 1.5; }` + 
        `table { width: 100% !important;}` + `td { border: 1px solid #ccc !important; }`,
        zIndex: 1101,
        style_formats_merge: false, //是否将style_formats设置中的样式附加到默认样式格式还是完全替换它们。true为附加
        style_formats_autohide: true, // 隐藏当前不可用的样式列表
        object_resizing: false, //禁用表格内联样式拖拽拉伸
        table_resize_bars: false,//禁用表格单元格拖拽拉伸
        forced_root_block: '', // 删除在tinymce中自动添加的p标签
        force_br_newlines : true,
        force_p_newlines : false,

        // style_formats: [
        //   // {
        //   //   title: '首行缩进',
        //   //   block: 'p',
        //   //   styles: { 'text-indent': '2em' }
        //   // },
        //   {
        //     title: 'Headings',
        //     items: [
        //       { title: 'Heading 1', format: 'h1' },
        //       { title: 'Heading 2', format: 'h2' },
        //       { title: 'Heading 3', format: 'h3' },
        //       { title: 'Heading 4', format: 'h4' },
        //       { title: 'Heading 5', format: 'h5' },
        //       { title: 'Heading 6', format: 'h6' }
        //     ]
        //   },
        //   // {
        //   //   title: 'Inline',
        //   //   items: [
        //   //     { title: 'Bold', format: 'bold' },
        //   //     { title: 'Italic', format: 'italic' },
        //   //     { title: 'Underline', format: 'underline' },
        //   //     { title: 'Strikethrough', format: 'strikethrough' },
        //   //     { title: 'Superscript', format: 'superscript' },
        //   //     { title: 'Subscript', format: 'subscript' },
        //   //     { title: 'Code', format: 'code' }
        //   //   ]
        //   // },
        //   {
        //     title: 'Blocks',
        //     items: [
        //       { title: 'Paragraph', format: 'p' },
        //       { title: 'Div', format: 'div' },
        //       // { title: 'Blockquote', format: 'blockquote' },
        //       // { title: 'Pre', format: 'pre' }
        //     ]
        //   },
        //   {
        //     title: 'Align',
        //     items: [
        //       { title: 'Left', format: 'alignleft' },
        //       { title: 'Center', format: 'aligncenter' },
        //       { title: 'Right', format: 'alignright' },
        //       { title: 'Justify', format: 'alignjustify' }
        //     ]
        //   },
        //   // {
        //   //   title: "行高",
        //   //   items: [
        //   //     { title: "1", block: "p", styles: { "line-height": "1.0" } },

        //   //     { title: "1.5", block: "p", styles: { "line-height": "1.5" } },

        //   //     { title: "1.75", block: "p", styles: { "line-height": "1.75" } },

        //   //     { title: "2", block: "p", styles: { "line-height": "2" } },

        //   //     { title: "3", block: "p", styles: { "line-height": "3" } },

        //   //     { title: "4", block: "p", styles: { "line-height": "4" } },

        //   //     { title: "5", block: "p", styles: { "line-height": "5" } },
        //   //   ],
        //   // },
        // ],

        // init_instance_callback: (editor) => {
        //   console.log(editor,'editor');
        //     // 更改元素为Div
        //     editor.execCommand('mceInsertContent', false, '<p></p>')
        // },

        // images_upload_handler: (blobInfo, success, failure) => {
          // console.log(blobInfo, success, failure,'blobInfo');
          // console.log(success, 'success');
          // console.log(failure,'failure');
          // const img = "data:image/jpeg;base64," + blobInfo.base64();
          // success(img);
        // },

      },
      myValue: this.value,

    }
  },
  beforeDestroy () {
    tinymce.remove()
  },
  created () {},
  mounted () {
    tinymce.init({})
  },
  computed: {},
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    },
    
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    
    // clear() {
    //   this.myValue = ''
    // },

    // calcWidth() {
    //   return document.body.clientWidth / 2 + 'px'
    // },
  },
}
</script>

<style lang="scss" scoped>
  ::v-deep .tox .tox-tbtn--select {
    width: 100px;
  }
  ::v-deep .tox .tox-sidebar-wrap {
    padding: 5px;
  }
 </style>

plugins.js

// autoresize 编辑器高度自适应
// autosave 添加此插件跳跳转url时会弹出一个提示框(提示信息：重新加载此网站？ 系统可能不会保存您所做的更改。)

const plugins = ['advlist anchor autolink  code codesample colorpicker directionality fullscreen hr image insertdatetime link lists media nonbreaking pagebreak paste preview print save searchreplace tabfocus table template textcolor textpattern visualblocks visualchars wordcount autoresize']

export default plugins

toolbar.js

// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

// const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']

// styleselect 行高
// table 表格
const toolbar = ['bold italic underline | fontselect | fontsizeselect | forecolor backcolor | removeformat']

export default toolbar