当时要实现这个 功能的时候，不知道 element admin 直接内置了 富文本编辑框，还想着自己去找一个来着，后面看了element admin 官网才发现Tinymce 这个玩意儿是可以直接拿来用的，还是很方便

官网：​​https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/rich-editor.html#%E5%B8%B8%E8%A7%81%E5%AF%8C%E6%96%87%E6%9C%AC​​

有这个就可以直接使用，引入组件，注册，模板中使用就行。

<TinymceEditor v-model="content" />


import TinymceEditor from '@/components/Tinymce'


components: {
    TinymceEditor
  },

直接使用​​v-model​​ 也可以绑定输入框的值

直接使用他提供的那个CDN 的话可能有一点问题，有时候可能显示不了，自己另外找一个CDN就行。
我用的这个：​​​https://lib.baomitu.com/tinymce/4.9.3/tinymce.min.js​​

推荐使用这个里边的：​​https://cdn.baomitu.com/tinymce​​ 更换一下就行

效果：

汉化

后来用户说 英文看不明白。。。

又只好给他整个汉化了，

自己去官网找到中文语言包下载到本地就好了，网上也有CDN，可以直接使用，代码需要修改的地方：

language: "zh_CN", // select language
language_url: require('@/assets/langs/zh_CN.js'), // 注意这里要用require 导入不然没效果，也可以直接在这里使用外部cdn链接

官网下载链接：​​https://www.tiny.cloud/get-tiny/language-packages/​​

注意引用语言包要是用require

require('@/assets/langs/zh_CN.js')

语言包存放目录如下

最终效果

完结！，有啥问题可以留言。