vue 使用第三方集成 tinymce富文本编辑器
参考链接：芜桐-在vue中使用tinymce富文本编辑器
以下是博客原文内容，【】内是原创补充说明
安装
在npm上有一个vue版本的tiny，我们先安装这个包。
npm i @tinymce/tinymce-vue -S
其实只用这一个包也是可以的。但是会出现一些小小的问题，由于需要我们提供api-key，官网是国外的网站，不考虑被墙的问题也要考虑英文阅读能力，所以我们最好是下载一个完整的编辑器的包，防止富文本编辑器加载缓慢和每次打开都会有一个烦人的弹窗的问题。
使用以下命令下载完整的包。
npm i tinymce -S
下载完成之后，需要把node_modules下的tinymce包下的资源拷贝到项目本地（我是放到static文件下了），以便本地访问这些资源。
【需要在index.html中使用本地依赖包，不然编辑器会加载很慢而且会有api-key警告。我放到static文件下了，所以目录是 static/tinymce/tinymce.js，目录没有固定位置，但是大多说放static或者public文件夹下】
【
文件目录：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="static/style/reset.css" type="text/css">
<script src="static/tinymce/tinymce.js"></script>
<title>qapi</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
】
使用
资源已经准备好了，那么就回到我们的vue文件里，看看怎么使用吧。
首先引入我们下载好的包【在哪里用到编辑器就在哪里引入】
import Editor from "@tinymce/tinymce-vue";
在components下注册编辑器组件
components: {
"tinymce-editor": Editor
},
在data里定义一个init变量来初始化我们的编辑器
init: {
language_url: "/static/tinymce/zh_CN.js",
language: "zh_CN",
height: 430,
plugins:"link lists image code table colorpicker textcolor wordcount contextmenu",
toolbar:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
branding: false,
images_upload_handler:(blobInfo, success,failure)=> {
success('data:image/jpeg;base64,' + blobInfo.base64())
}
},
其中编辑器的汉化部分想必已经看到了，配置language和language_url即可。【这里的汉化包路径language_url需要根据自己的文件路径配置，上图目录文件中的 zh_CN.js 就是汉化包，不是下载了tinymce依赖包就有的哦，需要自己额外下载，我只是为了方便跟本地资源包放一起了】
放置组件。
<div>
<tinymce-editor :init="init" v-model="form.content"></tinymce-editor>
</div>
可以看到，组件直接支持v-model指令，直接双向绑定数据。
【其他详细内容就去看博客原文吧】