vue本地引入TinyMCE富文本编辑器

1.依赖安装

cnpm install @packy-tang/vue-tinymce

2. main.js 文件引入

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

3.官网下载插件

3.1 https://www.tiny.cloud/get-tiny/self-hosted/

3.2 vue静态访问路径public文件夹下创建tinymce文件夹

3.3 将下载的插件解压, 拷贝\js\tinymce 路径下的内容放到新建tinymce文件夹下

4.在index.html 中添加

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<script src="./tinymce/tinymce.min.js"></script>

5.vue中使用

<vue-tinymce v-model="" :setting="setting" />

6.插件参考文档 http://tinymce.ax-z.cn/

setting: {
        menubar: false, // 指定哪些一级菜单显示，或调整菜单顺序
        // toolbar 指定工具栏上显示的按钮，使用空格分隔，用 | 分组。如要隐藏菜单栏，将其值设为false即可
        toolbar: "image | alignleft aligncenter alignright",
        plugins: "link image",
        images_upload_url: '', // 文件上传路径
        images_upload_base_path: '', // 如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。
        height: 300, // 编辑器高度
        language: "zh_CN", // 中文
        statusbar: false, // 显示隐藏状态栏
        branding: true, // 编辑器界面右下角的“Tiny”
        elementpath: false, // 设为false时，可隐藏底栏的元素路径
      },