Vue-html5-editor编辑器的使⽤及⼀些问题解决安徽成考招生网
近期由于需要对公司运营系统进⾏优化和升级，⽽原有后台系统所使⽤的vue-quill-editor编辑器对粘贴进来的内容的⾏内样式全部进⾏了过滤，虽然这样可以防⽌XSS攻击，但是却完全⽆法满⾜业务需要，为此对编辑器进⾏了更换，采⽤Vue-html5-editor 这个编辑器。
这是⼀个基于Vue 2.0系列的编辑器（），还不错，但却存在⼀些问题，以下记录这些问题，并提供解决办法。
1. 复制⽹络图⽚时⽆法粘贴成功
主要原因是图⽚链接存在跨域问题。运营⼈员复制的内容都是基于环境的，对所有的图⽚链接地址加
了crossorigin="anonymous"，所以复制图⽚的时候⽆法正常显⽰出来。
解决的办法是在编辑器的更新事件触发时，对所有的img图⽚链接中的crossorigin="anonymous"替换为空，代码如下：
// 更新编辑器内容
updateData(){
let obj = ElementsByClassName("content")[0];
let html = obj.innerHTML;
let filterHtml =  place(/crossorigin="anonymous"/g,"");
// 编辑器封装后，将内容传出去
this.$emit('contentChange',filterHtml);
},
2. ⽆法从已有的图库中选择图⽚
此编辑器插⼊图⽚的⽅式主要有两种，⼀是输⼊链接插⼊图⽚，⼆是选择本地的图⽚转成base64后插⼊图⽚。
很显然，没法使⽤公司已经有素材库的图⽚，为此需要对该编辑器的源码做⼀些修改， 主要修改如下：
(1). 将“上传”改为“选择”。修改⽂件 vue-html5-editor.js ，⼤约在310⾏的 template$3 变量中。
(2). 将以前触发上传的事件改为触发⼀个打开选择图⽚的模态框，以便选择图库中的图⽚。修改⽂件vue-html5-editor.js ，⼤约在343⾏的pick事件中。
pick: function pick() {
// 取消触发上传图⽚的事件
// this.$refs.file.click();
// ⾃定义的触发图⽚选择模态框的事件
this.$parent.$parent.openModal();
},
2022中级会计师成绩查询以下是图⽚选择的模态框展⽰：
厦门市人力资源和社会保障局(3). 由于从图库中选择图⽚获取的仅仅是⼀个图⽚的链接地址，最终也是要以图⽚的形式插⼊编辑器中的，⽽编辑器插⼊图⽚的功能本⾝是⽐较OK的，为了省事，决定借⽤编辑器的插⼊图⽚功能，所以定义了⼀个事件，⽤于接收选择的图⽚地址，然后将图⽚的链接地址赋给编
辑器⾃带的插⼊图⽚的输⼊链接框中，然后点击“确定”就可以插⼊图⽚了。
代码如下：
// 选择的图⽚地址
selectedImageUrl(url){
let obj = this.$refs.editor.$children;
// imageUrl为编辑器原有的变量
obj[0].imageUrl = url;
},
3. 插⼊的图⽚没有做宽度限制
由于图库中有些图⽚的尺⼨⽐较⼤，会超出编辑器的总宽度，导致排版⽐较难看，为此在插⼊新图⽚时，需要给图⽚加⼀个⾏内样式，即宽
度为百分百。
设置图⽚宽度的代码如下：
this.$nextTick(()=>{
let list = document.querySelectorAll(".vue-html5-editor .content img");
if(list.length){
for(let i=0;i<list.length;i++){
let img = list[i];
img.style.width = "100%";
}
};
});
}
同时在编辑器插⼊图⽚的事件中调⽤上⾯这个⽅法，修改⽂件vue-html5-editor.js ，⼤约在 333 ⾏的 insertImageUrl 事件中，代码如下：
insertImageUrl: function insertImageUrl() {
if (!this.imageUrl) {
return
}
this.$Command(Command.INSERT_IMAGE, this.imageUrl);
// 对新插⼊的图⽚设置图⽚最⼤宽度
this.$parent.$parent.setImageWidth();
this.imageUrl = null;
},
4. 给图⽚加超链接
由于在富⽂本⾥是有很多图⽚是要加超链接的，这个编辑器提供的加超链接是真⼼不好⽤，需要⽤⿏标选中⽂本或是图⽚才能加超链接，运营⼈员反映相当⿇烦，⽽且加了链接也看不到是否加成功了的标识。
实现思路如下：
1. 在编辑器的内容更新时，给富⽂本中所有的图⽚加上⼀个data-index，并同时加上点击事件。当点击当前图⽚时，获取当前图⽚的HTML、⾃定义的data-index，同时获取当前图⽚的⽗元素，如果当前图⽚的⽗元素是已经加了链接的A标签，则获取A标签的链接地址以⽅便修改。代码如下：
let imgs = document.querySelectorAll(".vue-html5-editor img");
for(let i=0;i<imgs.length;i++){
let img = imgs[i];
学考网成绩查询网站
img.style.cursor="pointer";
img.setAttribute("data-index",i);
// 显⽰加链接的对话框
this.showImgLinkModal = true;
// 区取当前图⽚的HTML
this.imgTarget = e.target.outerHTML;
// 获取当前图⽚⾃定义的index
this.imgIndex = Attribute("data-index");
// 获取当前元素的⽗元素
let parent = e.target.parentElement;
// 如果图⽚的⽗元素是已经加了链接的A标签
if(parent.tagName=='A'){
// 获取A标签的链接地址，⽅便修改链接地址
this.imgLink = Attribute("href");
}
}
}
},
2. 确认添加图⽚链接时，根据当前图⽚是否已经添加了链接来做不同的处理。如果没有加链接就加上；如果已经加了链接，就更新链接地
址。代码如下：
// HTML转换为DOM结点
parseElement(htmlString){
return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0];
},
// 确认添加图⽚链接
confirmAddLink(){
// 加了链接的标识符
let span = '<span id="linkMark" position:relative;display:block" href="'+this.imgLink+'">'+span+img+'</a>';
// 将HTML转换为节点类型
let spanNode = this.parseElement(span);
let aNode = this.parseElement(a);
// 获取当前图⽚
let index = this.imgIndex;
let imgs = document.querySelectorAll(".vue-html5-editor img");
let current = imgs[index];
安徽省职称评审2022
let children = current.parentNode.children;
// 如果当前图⽚⽗元素不是A标签
if(current.parentNode.tagName!='A'){
for(let i=0;i<children.length;i++){
let item = children[i];
// 如果⼦节点中的某⼀个节点等于当前图⽚对象
if(item.isEqualNode(current)){
// 将加了链接的图⽚添加到当前节点下⼀个节点之前
current.parentNode.insertBefore(aNode, Sibling);
// 移除没有加链接的图⽚
// 移除没有加链接的图⽚
veChild(item);
break;
}
};
医师助理资格证什么时候报名}else{
let link = this.imgLink;
// 重新给当前图⽚的⽗元素A标签设置可能更改的链接
current.parentNode.setAttribute("href",link);
// 给富⽂本中的图⽚本⾝存在链接设置样式，防置链接是原有的
current.parentNode.setAttribute("style","position:relative;display:block");
let hasLinkMark=false;
// 判断是否有链接标识
for(let i=0;i<children.length;i++){
let item = children[i];
if(item!=current ){
if(item.tagName=='SPAN' && item.id=="linkMark"){
hasLinkMark=true;
}else{
veChild(item);
}
}
};
// 如果没有链接标识
if(!hasLinkMark){
// 添加⼀个链接标识
current.parentNode.insertBefore(spanNode,children[0]);
}
};
// 关闭添加链接的模态框
this.closeImgLinkModal();
// 更新图⽚事件
this.addImgEvent();
this.$nextTick(()=>{
let result = document.querySelectorAll(".content")[0].innerHTML;
t = result;
});
},
3. 关闭图⽚添加链接的模态框。代码如下：
// 关闭插⼊图⽚链接模态框
closeImgLinkModal(){
this.showImgLinkModal = false;
this.imgTarget = null;
this.imgIndex = null;
this.imgLink = "";
},
以下是加了链接的效果：