集成UEditor富文本编纂器的办法-

这次给大家带来集成UEditor富文本编纂器的办法，集成UEditor富文本编纂器的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来集成UEditor富文本编纂器的办法，集成UEditor富文本编纂器的注意事项是什么，下面就是实战案例，一起来看一下。

在vue的'项目中碰到了需要运用富文本编纂器的需求，在github上看了许多vue封装的editor插件，许多对图片上传和视频上传的支撑并不是非常不错，终究还是决议运用UEditor。

这类的文章网上有许多，我进行了探索、手写代码、汇总、排版，构成了这篇文章。

下载对应的UEditor源码

第一，去官网高低载UEditor的源码，依据你后台说话的不一样下载对应的版本（PHP、Asp、.Net、Jsp）。

http://ueditor.百度.com/website/download.html

下载之后，把资源放到 /static/ue/ 静态名目下。文档构造如下：

（我把UEditor放到了static静态名目下面，这里的文件不会被webpack打包，固然你也可以选中性地放进src中）

编纂 UEditor 编纂器 配置文件

我们打开 ueditor.config.js，修改其中的window.UEDITOR_HOME_UR配置，如下：

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编纂器资源文件根名目
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

ueditor.config.js文件有许多配置，可以在这里进行一些初始化的全局配置，比方编纂器的默许宽高档：

,initialFrameWidth:1000 //初始化编纂器宽度,默许1000
,initialFrameHeight:320 //初始化编纂器高度,默许320

其他的参数配置，在该文件中有细致列出，或者参照 官方文档 http://fex.百度.com/ueditor/

将编纂器集成到系统中

打开 /src/main.js 文件，插入下面的代码：

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

开发公共组件 UE.vue

我们在 /src/components/ 名目下新建 UE.vue文件，作为我们的编纂器组件文件。

下面代码供给简略功能，概括运用依据需求完美该组件即可。