vue集成百度UEditor富文本编辑器教程

在前端开发项目中，在页面上集成富文本编辑器是不可避免的。那么，如果你有这方面的需求，希望能对你有所帮助。

Vue是前端开发者追捧的框架，简单易用，但基于vue的富文本编辑器大多过于简洁。所以我把百度富文本编辑器放到了vue项目中。效果图如下

废话少说。

1.使用vue-cli构建vue项目。然后下载UEditor源代码，地址

将项目复制到vue项目的静态文件中。目的是使服务能够访问内部文件并打开UEditor目录文件。这里下载了jsp版本。文件名没有更改。打开里面的ueditor.config.js文件，找到serverUrl，并注释这一行代码。该代码用于上传图片的背景地址。如果你不评论，你会要求一个错误。编辑器运行，然后通过配置服务修改地址。

2.将主js文件引入。vue文件

“进口”././static/utf8-JSP/ueditor . config ' import '././static/utf8-JSP/ueditor . all '；“进口”././static/utf8-JSP/lang/zh-cn/zh-cn '；3.在数据中声明一个变量存储UEditor的实例，方便在vue的其他地方使用，然后声明一个变量存储手动获取的编辑器的内容，再声明另一个变量存储初始化时要写入编辑器的内容。三个变量。如果处理得当。当变量可以减少时。这是一个愚蠢的方法

4.在vue的挂载钩子函数中调用编辑器的方法来生成一个实例，将其存储在刚刚声明的变量中，并在实例中传入参数。第一个是id，它是生成编辑器的div的id。第二个参数是一个对象。对象的内容是编辑器的配置。比如资源访问路径、工具栏内容配置。

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

div id=' editor ' type=' text/plain ' style=' width :1024 px；' height:500px'/div

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

this.ue=UE.getEditor('editor '，{ BaseUrl: ' '，UEDITOR _ HOME _ URL : ' static/utf8-JSP/'，})；UEDITOR_HOME_URL是配置编辑器访问自身所需的路径。设置为存储的文件。utf8-jsp是编辑器文件的目录。不同的目录可以自行更改

7.那就省省吧。您可以在界面上显示完整的富文本编辑器

8.如果想要获取内容，可以使用数据中声明的编辑器实例来获取vue中的内容。实例调用方法getContent()

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

更多方法参考官方文件。

10.文件内容属于个人踩坑经验。如果有错误。请留言说明。谢谢你

11.需要注意的是，资源路径容易出错。使用相对路径

12.发布代码

超文本标记语言

模板div class=' hello ' div id=' editor ' type=' text/plain ' style=' width :1024 px；' height:500px'/div按钮@点击='提交'保存/按钮按钮@点击='谢茹'编写/按钮/div/模板js

“脚本导入”././static/utf8-JSP/ueditor . config ' import '././static/utf8-JSP/ueditor . all '；“进口”././static/utf8-JSP/lang/zh-cn/zh-cn '；导出默认{ name: 'hello '，data () { return { ue: ' '，uedata: []，xirudata :[]}，mounted(){ this . UE=UE . geteditor(' editor '，{ BaseUrl: ' '，UEDITOR _ HOME _ URL : ' static/utf8-JSP/'，//toolbar s :[]})；}，methods : { submit(){ this . uedata . push(UE . geteditor(' editor '))。getContent())；console . log(this . uedata . join(' \ n '))；}，谢茹(){ue。geteditor ('editor ')。setcontent('欢迎使用ueeditor ')；} } }/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。