当时要实现这个 功能的时候,不知道 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')
语言包存放目录如下
最终效果
完结!,有啥问题可以留言。