介绍
这篇文章主要介绍vue2.0如何实现富文本编辑器功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>前端富文本编译器使用总结:
UEditor:百度前端的开源项目,功能强大,基于jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲
bootstrap-wysiwyg:微型,易用,小而美,只是引导+ jQuery…
kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了
wangEditor:轻量,简洁,易用,但是升级到3。x之后,不便于定制化开发。不过作者很勤奋,广义上和我是一家的人,打个叫
羽毛:本身功能不多,不过可以自行扩展,api也很好懂,如果能看懂英文的话……
summernote:没深入研究,UI挺漂亮,也是一款小而美的编辑器,可是我需要大的
在这里着重说一下这个tinymce这个插件,
<>强优势有三:
1。GitHub上星星很多,功能也齐全;
2。唯一一个从词粘贴过来还能保持绝大部分格式的编辑器;
3。不需要找后端人员扫码改接口,前后端分离,
<强>上代码(vue中使用)
1。引入
<代码> npm安装@tinymce/tinymce-vue - s
2。在<代码> node_modules>
//如果是使用vue-cli 3。x构建的打印稿项目,就放到公共目录下,文中所有静态目录相关都这样处理
3。给你们个语言包(https://www.tiny.cloud/download/language-packages/)地址都给了要是还不会那就没救了
4,然后将这个语言包放到静态目录下,为了结构清晰,我包了一层tinymce目录
5。进口
import tinymce 得到& # 39;tinymce/tinymce& # 39;
import & # 39; tinymce/主题/现代/主题# 39;
import Editor 得到& # 39;@tinymce/tinymce-vue& # 39; tinymce-vue是一个组件,需要在组件中注册,然后直接使用
& lt; Editor id=皌inymce", v模型=皌inymceHTML",: init=皌inymceInit"祝辞& lt;/editor> 这里的init是tinymce初始化配置项,后面会讲到一些关键的api,完整api可以参考https://www.tiny.cloud/docs/configure/
编辑器需要一个皮肤才能正常工作,所以要设置一个skin_url指向之前复制出来的皮肤文件
data (), {
return {才能
,,,tinymceHtml:, & # 39;请输入内容& # 39;,
init:,,,, {
,,,,language_url:, & # 39;/静态/tinymce/zh_CN.js& # 39;
,,,,语言:,& # 39;zh_cn # 39;
,,,,skin_url:, & # 39;/静态/tinymce/皮/浅灰色,,
,,,,身高:,300年,
,,,,插件:,& # 39;link lists image code table colorpicker textcolor wordcount ,快捷菜单# 39;
,,,,工具栏:,& # 39;bold italic underline strikethrough |, fontsizeselect |, forecolor backcolor |, alignleft aligncenter alignright alignjustify |, bullist numlist |, outdent indent blockquote |, undo redo |, link unlink image code |, removeformat& # 39;
,,,,品牌:假
,,,}
,,}
}, 6。同时在安装中也需要初始化一次:
安装(){
tinymce.init({}),//,特别注意这个空对象的存在,如果这个初始化空对象不存在依旧会报的错
} 完整代码如下:
& lt; template>
,& lt; div 类=& # 39;tinymce& # 39;比;
& lt;才能h2> tinymce</h2>
& lt; !——,富文本编辑组件,——比;
& lt;才能editor id=& # 39; tinymce& # 39;, v模型=& # 39;tinymceHtml& # 39;,: init=& # 39; init # 39;祝辞& lt;/editor>
& lt;才能div v-html=& # 39; tinymceHtml& # 39;祝辞& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
,import tinymce 得到& # 39;tinymce/tinymce& # 39;
,import & # 39; tinymce/主题/现代/主题# 39;
,import Editor 得到& # 39;@tinymce/tinymce-vue& # 39;
,import & # 39; tinymce/插件/图像# 39;
,import & # 39; tinymce/插件/链接# 39;
,import & # 39; tinymce/插件/代码# 39;
,import & # 39; tinymce/插件/表# 39;
,import & # 39; tinymce/插件/列表# 39;
,import & # 39; tinymce/插件/快捷菜单# 39;
,import & # 39; tinymce/插件/wordcount # 39;
,import & # 39; tinymce/插件/器# 39;
,import & # 39; tinymce/插件/输入textcolor # 39;
,export default {
,,名字:& # 39;tinymce& # 39;
data 才能;(),{
,,return {
,,,tinymceHtml:, & # 39;请输入内容& # 39;,
init:,,,, {
,,,,language_url:, & # 39;/静态/tinymce/zh_CN.js& # 39;
,,,,语言:,& # 39;zh_cn # 39;
,,,,skin_url:, & # 39;/静态/tinymce/皮/浅灰色,,
,,,,身高:,300年,
,,,,插件:,& # 39;link lists image code table colorpicker textcolor wordcount ,快捷菜单# 39;
null
null
null
null
null
null
null
null
null
null
null
