官网：http://tinymce.ax-z.cn/

一、简介

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

二、TinyMCE的优势：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

三、安装组件

第三方集成专区 -- Vue 点击进去 进去后的文档 执行命令：npm install @packy-tang/vue-tinymce 或者 E:/HBuilderX/plugins/npm/npm.cmd install @packy-tang/vue-tinymce，最后在node_modules文件夹 生成 @packy-tang文件夹/vue-tinymce文件夹

四、官网的引用

<template>
    <!-- 全局引入TinyMCE -->
    <script src="//unpkg.com/tinymce@5.1.5/tinymce.min.js"></script>
    <!-- App -->
    <div id="app">
        <vue-tinymce v-model="content" :setup="setup" :setting="setting" />
    </div>
</template>
<script>
    import Vue from "vue"
    import VueTinymce from "@packy-tang/vue-tinymce"

    //安装组件
    Vue.use(VueTinymce)

    new Vue({
        el: "#app",
        data: function() {
            return {
                content: "<p>html content</p>",
                setting: {
                    height: 500
                }
            }
        },
        methods: {
            setup(editor) {
                console.log(editor)
            }
        }
    })
</script>

五、实际项目

1、在node_modules文件夹 生成的 @packy-tang/vue-tinymce文件夹，将vue-tinymce文件夹 复制到 某个components文件夹里面

2、将tinymce.min.js放于 public/static/js文件夹

下载地址：https://unpkg.com/tinymce@5.1.5/tinymce.min.js

tinymce.min.js的存放位置

3、问题：

3-1、tinymce.min.js的引用问题

可以直接引用线上的路径，本人建议将tinymce.min.js下载，引用自己项目的路径

• A、代码如下：

<template>
  <el-container>
    <el-header>
      <div><span>校园头条</span><span class="commapp_arrow">></span><span>24小时</span></div>
    </el-header>
    <el-main class="comm-HeadlinesDiv">
      <div class="el-col-md-16 el-col-offset-4">
        <div class="card updaterCard">
          <div class="myUpdateItem ThemeBorderColor4">
            <div class="myUpdateItem_Content">
              <div class="msgContainer msg_textarea_Updater">
                <div class="mentions-input-box">

                  <script src="https://unpkg.com/tinymce@5.1.5/tinymce.min.js"></script>
                  <VueTinymce v-model="h_editHtml" />

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import { mapActions } from 'vuex'
  import VueTinymce from '../components/vue-tinymce/src/vue-tinymce.vue'

  export default {
    name: 'Hours',
    components: {
      VueTinymce
    },
    data() {
      return {
        h_editHtml: '<h1>11111</h1>'
      }
    },
    methods: {
      
    }
  }
</script>

<style>
</style>

• B、报错：

报错.png

• C、解决：

我们项目<script></script>的引用要放到public/index.html

3-2、vue-tinymce.vue里面的render位置问题

• A、代码如下：

<script>
  /**
   * 注：编辑器二次刷新处理
   * 编辑器二次刷新具体效果为输入光标重置到第一行第一个字前。
   * 这种效果根本无法正常录入，其原因是双向绑定数据导致编辑器数据更新所致。
   * 根据编辑器的不同状态做标记，当标记为`INPUT`录入时，数据将不会更新至编辑器，
   * 从而避免二次更新的情况，具体请看`content`部分和`editor event`部分的代码。
   * */

  const INIT = 0;
  const INPUT = 1;
  const CHANGED = 2;

  const status = ['INIT', 'INPUT', 'CHANGED']
  const changedLog = debug => {
    if (!debug) return () => false
    console.warn("`@packy-tang/vue-tinymce`进入debug模式");
    return (e, _status, val, oldVal) => console.log(`来自：%s | 状态：%s \n %s \n %s`, e.type, status[_status], val, oldVal)
  }

  export default {
    name: "VueTinymce",
    model: {
      prop: "content",
      event: "change"
    },
    props: {
      content: {
        type: [String, Object],
        default: ''
      },
      setup: {
        type: Function,
        default: function() {}
      },
      disabled: {
        type: Boolean,
        default: false
      },
      setting: {
        type: Object,
        default: function() {
          return {};
        }
      },
      debug: Boolean
    },
    render(createElement) {
      if (typeof tinymce === "undefined") {
        return createElement('div', "tinymce is undefined");
      }
      return createElement('div', {
        attrs: {
          id: this.id
        }
      });
    },
    data() {
      return {
        id: 'vue-tinymce-' + Date.now() + Math.floor(Math.random() * 1000),
        editor: null,
        status: INIT,
        bookmark: null
      }
    },
    watch: {
      content(val, oldVal) {
        this.changedLog({
          type: "propsChanged"
        }, this.status, `${val} | ${oldVal}`, "--")
        if (this.status === INPUT || oldVal === val) return;
        if (!this.editor || !this.editor.initialized)
      return; // fix editor plugin is loading and set content will throw error.
        if (val === null) return this.resetContent("");
        this.setContent(val);
      },
      disabled(val) {
        this.editor.setMode(val ? "readonly" : "design")
      }
    },
    created() {
      this.changedLog = changedLog(this.debug)
      if (typeof tinymce === "undefined") throw new Error('tinymce undefined');
    },
    beforeMount() {
      const setting = Object.assign({},
        this.setting, {
          selector: '#' + this.id,
          setup: (editor) => {
            this.setup(editor);
            // console.log('setup');
            editor.on('init', () => {
              // console.log('init', this.content);
              this.setContent(this.content, editor)
              editor.on('keyup input', e => { //只在编辑器中打字才会触发
                this.status = INPUT //编辑器录入文字时标记为`INPUT`状态
              })
              editor.on('SetContent', e => { //编辑器在插入图片和撤销/重做时触发，组件content更新数据也会导致触发
                this.changedLog(e, this.status, editor.getContent(), "--")
              })
              editor.on('Blur', e => {
                this.status = INIT
                this.changedLog(e, this.status, editor.getContent(), "--")
              })
              editor.on('input keyup Change Undo Redo ExecCommand NodeChange', e => {
                this.onChanged(e, editor)
              })
            });
          }
        }
      );
      this.editor = tinymce.createEditor(setting.selector, setting)
    },
    mounted() {
      this.editor.targetElm = this.$el
      this.editor.render()
    },
    updated() {
      this.editor.render()
    },
    beforeDestroy: function() {
      this.editor.remove();
    },
    methods: {
      setContent(val, editor) {
        if (!editor) editor = this.editor
        editor.setContent(val)
        editor.selection.moveToBookmark(this.bookmark)
      },
      resetContent(val, editor) {
        if (!editor) editor = this.editor
        if (!!editor.resetContent) return editor.resetContent(val)
        editor.setContent(val)
        editor.setDirty(false)
        editor.undoManager.clear()
      },
      onChanged(e, editor) {
        if (!editor) editor = this.editor
        if (e.type === 'change') this.bookmark = e.level.bookmark
        const content = editor.getContent()
        this.changedLog(e, this.status, content, "--")
        this.$emit('change', content);
      }
    }
  }
</script>

• B、报错：

报错.png

• C、解决：

  
  将render方法 放于 所有方法的最后

3-3、CHANGELOG.md

• A、报错：

报错.png

• B、解决：

直接删除CHANGELOG.md

3-4、README.md

• A、报错：

报错.png

• B、解决：

直接删除README.md

3-5、LICENSE

• A、报错：

报错.png

• B、解决：

直接删除LICENSE

3-6、vue-tinymce.cjs.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-7、vue-tinymce.esm.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-8、vue-tinymce.umd.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-9、Uncaught SyntaxError: Unexpected token '<'

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

不知道为什么引用线上的tinymce.min.js路径，就不会报错

四、效果图

tinymce编辑器终于出来啦！