vue使⽤Ueditor富⽂本的配置
UEditor是百度的⼀个javascript富⽂本编辑器，功能强⼤，以下是vue项⽬中的引⼊过程
1.下载vue-ueditor-wrap:
说明：下载这个插件对vue使⽤⽅便，有双向数据绑定的优势，操作相对⽅便点
第⼀步，先下载依赖
npm i vue-ueditor-wrap -S
第⼆步，引⼊到项⽬中（我是引⼊到需要的页⾯中，没有全局引⼊）
import VueUeditorWrap from'vue-ueditor-wrap'
第三步，注册组件
components: {
VueUeditorWrap //ueditor富⽂本编辑器
},
第四步，在模板中使⽤组件
<template>
<div>
<VueUeditorWrap/>
</div>
</template>
2，下载ueditor官⽅提供的压缩包：
3.将下载好的官⽅压缩包放到static或public下⾯：
项⽬如果使⽤的是vue-cil2.0版本的，就放到static，若为vue-cil3.0版本的，就放到public⽂件夹下
4，修改引⽤处
<VueUeditorWrap :config="editorConfig" v-model="formData.Remark" />
editorConfig: {
autoHeightEnabled: false, //编译器不⾃动被内容撑⾼
initialFrameHeight: 350, //初始容器⾼度
initialFrameWith: "100%",
serverUrl: "/api/ueditor/net/controller.ashx", //上传⽂件地址
UEDITOR_HOME_URL: "/UEditor/", //UEditor资源⽂件的存放路径
},
⾄此，已完成配置
1，鉴于第⼆次进页⾯会报“ueditor TypeError: Cannot set property 'innerHTML' of null"”
此问题可以修改  ueditor源码  ueditor.all.js
//下⾯是源码先去页⾯是否存在已经实例化的编辑器对象,
// 如果没有，就新⽣成⼀个编辑器.
// 否则直接将页⾯上到的那个编辑器给返回.
// 再联想到刚才的报错Cannot set property 'innerHTML' of null(⽽不是undefined,⽽且控制台也没有输出编辑器2实例化完成),
// 那么真相只有⼀个! 那就是当你在⼀次来到编辑器页⾯时，编辑器早已经存在，都已经存在的编辑器,⾃然不会触发ready事件，所以⾃然不能触发卸载ready事件⾥的setContent事件了.
// var editor = instances[id];
// if (!editor) {
//    editor = instances[id] = new UE.ui.Editor(opt);
//    der(id);
// }
// return editor;
// 下⾯是修改后的，解决问题：‘Cannot set property 'innerHTML' of null’每⼀次直接根据js传来的id,⽣成⼀个全新的ueditor对象
UE.delEditor(id);
var editor = new UE.ui.Editor(opt);
asp富文本编辑器return editor;
};
UE.delEditor = function(id) {
var editor;
if ((editor = instances[id])) {
editor.key && editor.destroy();
delete instances[id];
}
};
,2，新增需求，需要返回没有html格式的纯⽂本给接⼝，使⽤
vue-ueditor-wrap的v-model获取的是有html格式的⽂本
解决办法就是获取编辑器实例
<VueUeditorWrap
id="editor"
:config="editorConfig"
v-model="formData.Remark"
:
destroy="true"
@ready="ready"
/>
//method中加⼊
ready(editorInstance) {
//编辑器实例
},
3,ueditor的图⽚浮动的失效问题
在fig.js⽂件中，有⼀个xss过滤⽩名单，这个地⽅对img标签的style进⾏配置，加上去，就好啦（这个问题查了蛮久的，没有对⽅向）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。