项目中用到了wangEditor,遇到了两个非常奇葩的问题
1、在进行内容输入的时候,输入中文,总是会将第一个字母变成英文展示到文本区域,去官网试了一下,发现也有这个问题,暂时的解决办法就是
text(val) {
if (val&&val!='<p><br/></p>') {
this.editor.config.focus = true
this.editor.txt.html(val)
}else{
this.editor.config.focus = false
this.editor.txt.html('<p> </p>');
}
监听输入内容的变化,在没有值的时候加一个空格
2、输入中文字符,按一下字符按键,会出现两个这个字符
就在change下面将焦点置为false,在text进行watch监听的时候再给true
具体代码如下:
initWangEditor() {
this.editor = new E(this.$refs.wangEditor);
//配置颜色
this.editor.config.colors = [
"#000000",
"#F40",
"#FFB6C1",
"#1E90FF",
"#00CED1",
"#00FF00",
"#FF7F50",
"#808000",
"#00FFFF",
"#4169E1",
"#800080",
];
//配置显示菜单项
this.editor.config.menus = [
"foreColor", // 文字颜色
"backColor", // 背景颜色
// 'head', // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
// "emoticon", // 表情
"image", // 插入图片
"table", // 表格
// "video", // 插入视频
// "code", // 插入代码
"undo", // 撤销
"redo", // 重复
];
// 本地图片上传:关闭外部图片引入
// this.editor.config.showLinkImg = false;
this.editor.config.uploadImgServer = this.$config.baseUrl+'uploadPicAndFile';
this.editor.config.uploadImgHooks={
before: function (xhr, editor, files) {
this.loading=true
},
customInsert: function (insertImg, result, editor) {
var url = result.data.fileUrl
insertImg(url)
this.loading=false
}
}
// //本地上传视频
// this.editor.config.showLinkVideo = false;
// this.editor.config.uploadVideoServer = this.$config.baseUrl+'uploadPicAndFile';
// this.editor.config.uploadVideoHooks={
// customInsert: function (insertvideo, result, editor) {
// var url = result.data.fileUrl
// insertvideo(url)
// }
// }
//获取文本区域中的内容
this.editor.config.onchange = (html) => {
this.newHtml = html; // html文本
this.newText = this.editor.txt.text(); // text文本
this.$emit("change", this.newHtml, this.newText);
};
// 配置触发 onchange 的时间频率,默认为 200ms
this.editor.config.onchangeTimeout = 500; // 修改为 500ms
// 去除复制过来文本的默认样式
this.editor.config.pasteFilterStyle = true;
//自定义 placeholder 提示文字
this.editor.config.placeholder = "请填写工作内容";
//设置高度
this.editor.config.height = 250;
this.editor.config.focus = false
this.editor.create();
// 添加内容前做异常捕获,避免this.text值问题导致报错
// try {
// //继续追加内容(用于初始化查询回填数据)
// // this.editor.txt.append(this.text);
// } catch (e) {
// console.info(e);
// }
},