在vue项目最近的开发过程中，由于需要在项目中添加富文本编辑器，在npm上已经发现了几个基于vue的富文本编辑器，但是它们都是高度兼容的，无法与IE9和10兼容。所以最后决定用百度UEditor。然后有各种方法来了解如何融入vue。好记性不如坏记性。写下来，以后需要的时候可以直接用。

1.首先下载UEditor源代码，并将整个文件放在静态文件夹中

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

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

“进口”./static/ueditor/ueditor . config . js“import”./static/ueditor/ueditor . all . min . js ' import './static/ueditor/lang/zh-cn/zh-cn . js ' import './Static/UEditor/UEditor . parse . min . js ' 3。在src/components文件夹下创建一个公共组件UE.vue文件作为编辑器组件

模板div类='UE '！-这个地方的大小可以自己控制-div id=' editor ' style=' width :100%；' height:120px'/div/div/template export default { name : ' UE '，prop : { value : { type : string，default:'' }，data() { return { editor: null，}；}，mounted() {//实例化编辑器editor this . editor=window . UE . geteditor(' editor ')；//设置编辑器默认内容this.editor.addlistener ('ready '，()={ this . editor . setcontent(this . value)})}，Methods: {//获取编辑器中的内容getuecontent(){ return this . editor . getcontent()} }，销毁(){//销毁编辑器this . editor . destroy()；}}4.我们可以通过ueditor.config.js更改编辑器显示的选项

如果我们默认显示它，它将如下所示

如果不需要某些元素，可以在ueditor.config.js中设置需要在工具栏中显示的标签

当然，您还需要进行其他配置，例如指定编辑器资源文件根目录

窗户。UEDITOR_HOME_URL='。/静态/UE/'；这里有一个友好的提醒。如果您的项目打包后没有放在一级目录中，建议写这样的相对路径，否则会报错，找不到资源。5.这样，您可以在其他组件中使用它。我们可以通过道具将默认显示值传递给编辑器，也可以通过getUEContent()方法获取编辑器的输入内容。但是您仍然会在浏览器控制台中看到一个错误

后台配置项返回格式错误，上传功能无法正常工作！

这是因为当我们在编辑器中上传图片或视频时，我们没有配置服务器请求接口。在ueditor.config.js中，我们可以配置serverUrl。

ServerUrl: '' //这个接口地址足够问你后台了。在这里，我们可以愉快地使用UEditor富文本编辑器。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。