富文本编辑器组件说明

基于 tinymce、@packy-tang/vue-tinymce 的二次封装

tinymce 中文文档传送门 @packy-tang/vue-tinymce 传送门

安装组件

yarn add tinymce-editor-plus

import Vue from 'vue'

import tinymce from "tinymce";
import VueTinymce from "@packy-tang/vue-tinymce";

Vue.prototype.$tinymce = tinymce; // 将全局tinymce对象指向给Vue作用域下
Vue.use(VueTinymce); // 安装vue的tinymce组件

import TinymceEditor from "tinymce-editor-plus";

<tinymce-editor
    v-model="form.helpContent"
    :uploadFileUrl="uploadFileUrl"
    @input="handlerEditor"
    @handleLoading="handleLoading"
    class="tinymce-editor"
>
</tinymce-editor>

属性

| 名称 | 描述 | | ------------- | ------------------------------------- | | plugins | 编辑器插件配置 | | toolbar | 编辑器工具栏配置 | | editorSetting | 编辑器完整配置项 | | handleLoading | 图片、word 等资源文件是否全部上传完成 | | uploadFileUrl | 上传图片、word 地址 | | cdn | 资源文件 cdn 地址 |