当前位置: 首页 > Web前端 > vue.js

vue使用tinymce和tinymce-vue实现富文本

时间:2023-04-01 11:08:06 vue.js

1.开发环境vue2。电脑系统windows10专业版3.在开发过程中,我们经常会用到富文本功能,下面分享一下。4、富文本比较:UEditor:百度前端开源项目,功能强大,基于jQuery,但不再维护,且后端代码有限,修改难度较大bootstrap-wysiwyg:micro,easyto使用,小而美,就是Bootstrap+jQuery...kindEditor:功能强大,代码简洁,需要配置后台,好久没更新了wangEditor:轻量级,简洁,好用,但是升级后到3.x,定制开发不容易了。不过,作者很勤奋。从广义上讲,我是一个家庭成员。Callquill:功能不多,但可以自行扩展,api简单易懂。如果你能看懂英文的话...summernote:没深入研究过,不过UI挺漂亮的,而且还是小而美的编辑器,不过我需要一个大的。有了这样的参考,最终选择了tinymce1,github上star多,功能齐全;2、唯一一款从word粘贴过来的,可以维护大部分格式的编辑器;3、无需找后端人员扫码改接口,前后端分离;5.我使用的版本是6.Vue引入TinyMCE富文本组件遇到的问题是因为版本兼容问题@tinymce/tinymce-vue@4.0.0只针对Vue@3.x版本,需要降级。7.安装npminstall@tinymce/tinymce-vue@3-Dnpminstalltinymce@5.7.0-D8。去官网下载语言包:(https://www.tiny.cloud/get-tiny/language-packages/)https://www.tiny.cloud/get-ti...[语言包]9.下载语言包后,复制到项目中,我放在assets下:10.在对应的.vue文件中使用//Import//导入富文本importtinymcefrom"tinymce/tinymce";importEditor来自“@tinymce/tinymce-vue”;导入“tinymce/skins/ui/oxide/skin.min.css”;//富文本样式import"tinymce/icons/default";//富文本样式//配置富文本import"tinymce/themes/silver/theme.min.js";//引入富文本主脚本//注册组件:{Editor},//template

//returntinymceHtml:"请输入内容",einit:{skin_url:require("@/assets/skins/ui/oxide/skin.min.css"),language_url:require("@/assets/langs/zh_CN.js"),language:"zh_CN",height:300,},//mountedtinymce.init({});10-1。全局注册,在mian.js中添加如下代码:importtinymcefrom"tinymce/tinymce";从“@tinymc导入编辑器e/tinymce-vue";import"tinymce/icons/default";import"tinymce/themes/silver/theme.min.js";Vue.component('editor',Editor);//注册全局组件10-2.引入注意事项://使用skin_url:require("tinymce/skins/ui/oxide-dark/skin.min.css"),这种形式引用时注??意使用require方法,否则无效11.示例无效果配置:
tinymceHtml:"Pleaseentercontent",einit:{},tinymce.init({skin_url:require("@/assets/skins/ui/oxide/skin.min.css"),language_url:require("@/assets/langs/zh_CN.js"),language:"zh_CN",height:300,});//此配置没有任何效果,请注意12.配置成功效果如下:13.本期分享到此结束,我hopeyoucanyouhelp,let'sworktowardthetop