0
点赞
收藏
分享

微信扫一扫

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)

花明 2022-12-05 阅读 101


当时要实现这个 功能的时候,不知道 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​​

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_css3


vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_官网_02


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

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_官网_03

<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​​ 更换一下就行

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_富文本_04

效果:

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_官网_05


vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_css_06

汉化

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

又只好给他整个汉化了,

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_html_07


自己去官网找到中文语言包下载到本地就好了,网上也有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')

语言包存放目录如下

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_css3_08

最终效果

vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)_css_09


完结!,有啥问题可以留言。


举报

相关推荐

0 条评论