tinymce-editor-vue2 v1.0.1

tinymce 富文本 Vue2版本

组件内引入了所有相关的插件用途，包括锚点、自动链接、特殊字符、文字方向、插入编辑图片、插入编辑媒体等插件内容。

安装

npm install tinymce-editor-vue2

组件内引入插件

import TinymceEditorVue2 from "tinymce-editor-vue2";

export default{
    components: {
        TinymceEditorVue2
    }
}

全局引入

import TinymceEditorVue2 from "tinymce-editor-vue2";

Vue.use(TinymceEditorVue2);

页面使用

<template>
  <div>
    测试页面
    <tinymce-editor
      v-model="html"
      @imageUpload="imageUpload"
      @fileUpload="fileUpload"
      :addButton="addButton"
    ></tinymce-editor>
    <tinymce-editor
      v-model="html"
      @imageUpload="imageUpload"
      @fileUpload="fileUpload"
    ></tinymce-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: "8888",
    };
  },
  methods: {
    imageUpload(blobInfo, success, failure) {
      console.log("上传接收", blobInfo, success, failure);
    },
    fileUpload(file, callback, meta) {
      console.log("上传文件接收", file, callback, meta);
    },
    addButton(editor) {
    //   editor.ui.registry.addButton("materialspace", {
    //     text: "素材空间",
    //     icon: "image",
    //     onAction: function () {
    //       editor.windowManager.openUrl({
    //         title: "选择会议模板",
    //         url: "https://www.163.com",
    //         width: 840,
    //         height: 300,
    //       });
    //     },
    //   });
    },
  },
};
</script>

<style lang="scss" scoped></style>

组件参数