Vue项目使用富文本之tinymce-vue

最近做一个后台管理系统需要用到富文本编辑器,使用环境：vscode+vue2
注意版本问题：tinymce-vue包的版本 4支持 Vue.js 3.x，但不支持 Vue.js 2.x。
对于 Vue.js 2.x 应用程序，请使用tinymce-vue版本 3
附上官方文档：
官方案例：https://github.com/tinymce/tinymce-vue
官方文档：https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide

一、安装

npm install --save @tinymce/tinymce-vue

这下载的是最新的版本 4以上的 但是只支持vue3及以上
我的是vue2 所以下载tinymce3的版本 不然找不到引用路径

$ npm install --save "@tinymce/tinymce-vue@^3"

二、下载汉化包
地址：汉化包地址
在public文件夹下新建tinymce文件夹，并把中文语言包zh_CN.js放进去

三、例子

<template>
    <div style="padding: 30px;">
        <div>登录日志</div>
        <editor
           :api-key="apiKey"
           :init="editConfig"
           v-model="content"
         />
         <div v-html="content"></div>
    </div>
</template>

<script>
import axios from 'axios'
import Editor from '@tinymce/tinymce-vue'
export default {
    components: {
      'editor': Editor
    },
    data() {
        return {
            content: "",
            apiKey: "fmpe10wgtn5cy4tq0quwhxd21a2mb6z7pwuf0zsut09xk039", //key值从官网注册申请来的
            editConfig: {
              height: 500, //富文本高度
              language_url: '/tinymce/zh_CN.js', //中文包
              language: 'zh_CN', //中文
              browser_spellcheck: true, // 拼写检查
              branding: false, // 去水印
              elementpath: true, //禁用编辑器底部的状态栏
              statusbar: true, // 隐藏编辑器底部的状态栏
              paste_data_images: true, // 是否允许粘贴图像
              menubar: true, // 隐藏最上方menu
              fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', //字体大小
              font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', //字体
              file_picker_types: 'image',
              images_upload_credentials: true,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount',
              ],
              toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
              // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
              images_upload_handler: function(blobInfo, success, failure) {
                let formdata = new FormData();
                formdata.append("file", blobInfo.blob());
                // 上传图片接口，跟后端同事协调上传图片
                // http://hh.xxxx.cn/admin/upload为上传图片接口
                axios.post('http://hh.xxxx.cn/admin/upload',formdata)
                .then(function(res) {
                //拿到上传成功的路径 在前端显示
                  success(res.data.data.src);
                }).catch(res => {
                   failure("error");
                 });
              }
            }
        }
    }
}
</script>

vue 解决tinymce在dialog对话框中层级太低的问题：https://blog.csdn.net/weixin_45353083/article/details/116023802