怎么在vue中使用UEditor富文本编辑器-创新互联

这篇文章给大家介绍怎么在vue中使用UEditor富文本编辑器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

网站的建设成都创新互联公司专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都人造雾等企业提供专业服务。

1、使用vue-cli构建一个vue项目。然后下载UEditor源码，

把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件，打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。

2、在.vue文件中引入主要js文件

import ‘../../static/utf8-jsp/ueditor.config' 
import ‘../../static/utf8-jsp/ueditor.all'; 
import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn';

3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用，然后申明一个变量存储手动获取的编辑器里面的内容，再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法

4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中，在实例中传入参数。第一个是id，id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径，toolbars内容配置。

5、在html部分写一个div标签

6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。

this.ue = UE.getEditor('editor',{ 
BaseUrl: '', 
UEDITOR_HOME_URL: 'static/utf8-jsp/', 
});

这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改

7、然后保存。就可以在界面上显示一个完整的富文本编辑器

8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容

9如果要设置内容则调用：setContent('欢迎使用ueditor');

更多方法参考官方文档。

10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢

11、需要注意的是资源路径容易搞错。使用相对路径即可

12、贴出代码

html

js

关于怎么在vue中使用UEditor富文本编辑器就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：怎么在vue中使用UEditor富文本编辑器-创新互联
文章路径：http://mswzjz.cn/article/dgieid.html