• 热门专题

如何更好的将富文本编辑器集成到vue中

作者:whl  发布日期:2018-11-21 08:57:00
  •     最近小编收到一个朋友的求助说在进行vue项目的开发过程中遇到了一个难题,添加富文本编辑器的时候状况百出,试了很多个显示vue可用的编辑器版本都没法很好的兼容IE9或者IE10,让工作运行起来十分困难,让人万分头疼。小编为此特意尝试了几款,最终找到了百度UEditor,这款软件估计能很好的解决这些问题。

    1.首先下载UEditor源码,将整个文件放到static文件夹中

    2.然后将UEditor集成到项目中去。

    找到src/main.js,在main.js中

    main.js

    3.在src/components文件夹下创建公共组件UE.vue文件,作为编辑器组件

    编辑器组

    4.我们可以通过ueditor.config.js来改变编辑器所显示的选项

    如果我们默认显示的话,会是这个样子

    默认显示

    如果你不需要某些元素,你可以在ueditor.config.js中的toolbars中设置需要显示的标签

    当然你还需要做下其他的配置,比如指定编辑器资源文件根目录

    指定编辑器资源文件根目

    在这里友情提示,如果你的项目打包之后不是放在一级目录下,建议写成这样相对路径,不然会报错找不到资源。 

    5.这样你就可以在其他组件引入使用了,我们可以通过props向编辑器传递默认显示的值,还可以通过getUEContent()方法获取编辑器输入的内容。但是在浏览器控制台你还是会看到报错

    后台配置项返回格式出错,上传功能将不能正常使用!

    这是因为我们在编辑器中上传图片或者视频的时候,没有配置服务器请求接口,在ueditor.config.js中,对serverUrl进行配置就可以了

    配置服务器

    serverUrl: “” //这个接口地址去跟你们的后台要就可以了

    操作到这个步骤我们就可以惊喜的发现UEditor富文本编辑器可以完美的使用了,以后再也不用为集成而烦恼了。以上就是今天要和大家分享的全内容了,感兴趣的朋友赶紧收藏起来以备不时之需吧!如果还有不明白的地方也欢迎大家留言,我们一起交流解决。

     

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规