可编辑的div:
<div contenteditable="true"
v-html="scopeChildren.row.remarks" @mouseup="getContent(scopeChildren.row,$event)" @focus="getRemarks(scopeChildren.row)"
@input="changeText"
@blur="changeRemarks(scopeChildren.row,$event)"
:style="scopeChildren.row.important ? 'color: red' : ''" style="padding-left: 8px;outline: none;"></div>
方法:
getContent (item,e) {
//获取选中区域内容
var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
if(txt == "") {//当选中内容为空时,阻止事件发生
window.event ? window.event.cancelBubble = true : e.stopPropagation();
} else {
var txt1 = txt.toString();//得到的选中的文本是一个对象,需要转化为字符串
var range = txt.getRangeAt(0);
if (this.isChangeText) {
if (range.startContainer === range.endContainer) {
this.insert(range.startOffset, range.endOffset, range.startContainer, false, false, false)
} else {
this.insert(range.startOffset, range.startContainer.textContent.length - range.startOffset, range.startContainer, true, false, true)
this.insert(0, range.endOffset, range.endContainer, false, true, false)
}
var keyStr1 = '<span style="color:red;font-weight:700;">'
var keyStr2 = '</span>'
var html = e.currentTarget.innerHTML.replace(new RegExp(keyStr1,"g"), "凹")
html = html.replace(new RegExp(keyStr2,"g"), "凸")
// 存在两个<<或>>时清空,选择字符和高亮完全一致时会是这种情况
if (this.searchChooseSameWord(html) !== '') {
html = html.replace(new RegExp('凹凹',"g"), "")
html = html.replace(new RegExp('凸凸',"g"), "")
}
var count = 0
var str = ''
for (var i = 0; i < html.length; i++) {
var add = true
if (html[i] === '凹') {
add = false
if (count === 1) {
count += 1
} else {
count += 1
str += "<span style='color:red;font-weight:700;'>"
}
}
if (html[i] === '凸') {
add = false
if (count >= 2) {
count = 0
} else {
count = 0
str += "</span>"
}
}
if (add) str += html[i]
}
e.currentTarget.innerHTML = str
this.isChangeText = true
}
}
},
searchChooseSameWord (str) {
var aoCount = 0
var tuCount = 0
var hasAo = false
var searchText = ''
for (var i = 0; i < str.length; i++) {
if (str[i] === '凹') {
if (aoCount === 1) { // 说明两个凹连续
hasAo = true
searchText = '凹凹'
aoCount = 0
continue
}
aoCount += 1
} else {
aoCount = 0
}
if (hasAo) {
searchText += str[i]
}
if (str[i] === '凸') {
if (tuCount === 1) { // 说明两个凹连续
return searchText
tuCount = 0
}
tuCount += 1
} else {
tuCount = 0
}
}
return ''
},
// noStar:不要< noEnd:不要>
insert (start, end, dom, endFinish, noStart, noEnd) {
var str = ''
for (var i = 0; i < dom.textContent.length; i++) {
if (i === start && !noStart) str += "凹"
str += dom.textContent[i]
// 如果starNode和endNode不一样,startNode的endFinish为true,要处理整个startNode
if (i === dom.textContent.length - 1 && endFinish && !noEnd) str += '凸'
if (i === end - 1 && !endFinish && !noEnd) str += '凸'
}
dom.textContent = str
},
getRemarks(item) {
item.oldRemarks = item.remarks
},
changeText () {
this.isChangeText = true
},
changeRemarks (item,e) {
if (this.isChangeText) {
this.$confirm("此操作将修改备注, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}) .then(() => {
const url = "paperOrder/updateRemarks";
const params = {
paperOrderId: item.id,
remarks: e.target.innerHTML
};
this.$http.post(url, params).then((response) => {
if (response.body.status === 1) {
this.$message({
type: "success",
message: "修改成功!",
});
this.isChangeText = false
} else {
this.$message({
type: "warning",
message: "修改失败!",
});
item.remarks = item.oldRemarks
this.isChangeText = false
}
});
})
.catch(() => {
console.log(item.oldRemarks)
e.target.innerHTML = item.oldRemarks
item.remarks = item.oldRemarks
this.isChangeText = false
this.$message({
type: "info",
message: "已取消修改",
});
});
}
}