VUE项目配置UEditor集成秀米编辑器

UEditor集成秀米编辑器

 

一、下载Ueditor相关静态文件存放位置
去Ueditor官网下载相关资源(本文下载的1.4.3.3版本):
下载之后，把资源放到 /static/ueditor/ 目录下。文档结构如下：

二、 在main.js中全局引入需要的文件

三、在index.html引入秀米配置文件

四、创建一个 ueditor.vue 组件

五、在项目中的hellowWorld组件中使用 ueditor 组件

六、根据不同情况调用 editor 中的方法
1.添加时，获取富文本内容
this.$refs.ueditor.getUEContent()

2.编辑时，设置富文本内容
this.$refs.ueditor.setContent( 接口返回值 )

七、UEditor插入秀米
秀米的第三方对接文档：http://hgs.xiumi.us/uedit/

1.在 index.html 中引用 xiumi-ue-dialog-v5.js 和 xiumi-ue-v5.css，也可以下载后在代码里面插入。

2.下载 xiumi-ue-dialog-v5.html，xiumi-ue-dialog-v5.js ,xiumi-ue-v5.css

和 internal.js，将其放置于你的ueditor 目录内

3.如果你将其放置于其他目录，请修改 xiumi-ue-dialog-v5.js中相应的内容:

   iframeUrl: 'static/ueditor/xiumi-ue-dialog-v5.html',

4.修改UEditor的配置（ueditor.config.js），将其中的“xxs过滤白名单”加上

   section:["class","style"],
5.秀米插入编辑器时格式错乱，关闭 ueditor.config.js 中的 xss

  ,xssFilterRules:false

  ,inputXssFilter:false

  ,outputXssFilter:false

6.ueditor效果

7,点击秀米效果