|
@@ -0,0 +1,757 @@
|
|
|
+export default {
|
|
|
+ methods: {
|
|
|
+ //获取所有父级标签以及当前文本在每个标签中的位置
|
|
|
+ getParentNode(selectObj) {
|
|
|
+ var dom = selectObj.anchorNode;
|
|
|
+ var parentNode = dom.parentElement;
|
|
|
+ if (!parentNode || parentNode.getAttribute("data-type") == "myEditBox") {
|
|
|
+ return [{ tagName: "div",tag: parentNode }];
|
|
|
+ }
|
|
|
+ var data = [];
|
|
|
+ NotIncludeDataType(parentNode, data);
|
|
|
+ function NotIncludeDataType(node, data) {
|
|
|
+ if (!node) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (node.getAttribute("data-type") != null) {
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ var tagName = node.tagName;
|
|
|
+ data.push({
|
|
|
+ tagName: tagName,
|
|
|
+ tag:node
|
|
|
+ });
|
|
|
+ NotIncludeDataType(node.parentElement, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+
|
|
|
+ //拆分html
|
|
|
+ SplitHtmlTag1(el) {
|
|
|
+ let temInnerHtml = el.trim();
|
|
|
+ let pattern = /<[^>]+>/g;
|
|
|
+ let Indexs = [];
|
|
|
+ let i = 0
|
|
|
+ var match = null
|
|
|
+ while ((match = pattern.exec(temInnerHtml)) != null) {
|
|
|
+ Indexs[i] = match;
|
|
|
+ i++;
|
|
|
+ }
|
|
|
+ var splitStrings = new Array();
|
|
|
+ i = 0;
|
|
|
+ var currentIndex = 0;
|
|
|
+ for (var index = 0; index < Indexs.length; index++) {
|
|
|
+ if (Indexs[index].index > currentIndex) {
|
|
|
+ splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, Indexs[index].index), "type": "text" };
|
|
|
+ i++;
|
|
|
+ splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
|
|
|
+ i++;
|
|
|
+ } else {
|
|
|
+ splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
|
|
|
+ i++;
|
|
|
+ }
|
|
|
+ currentIndex = Indexs[index].index + Indexs[index][0].length;
|
|
|
+ }
|
|
|
+ if (currentIndex < temInnerHtml.length) {
|
|
|
+ splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, temInnerHtml.length), "type": "text" };
|
|
|
+ }
|
|
|
+
|
|
|
+ return splitStrings;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //递归查找标签
|
|
|
+ checkPrevTag(data,index,tag){
|
|
|
+ for(var i = index;i<data.length && i>=0;i--){
|
|
|
+ if(data[i].type == 'tag'){
|
|
|
+ if(data[i].text.indexOf(tag)!=-1){
|
|
|
+ return {
|
|
|
+ tag: data[i].text,
|
|
|
+ index:i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ checkNextTag(data,index,tag){
|
|
|
+ for(var i = index;i<data.length;i++){
|
|
|
+ if(data[i].type == 'tag'){
|
|
|
+ if(data[i].text.indexOf(tag)!=-1){
|
|
|
+ return {
|
|
|
+ tag: data[i].text,
|
|
|
+ index:i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ checkBetweenTag(data,startIndex,endIndex,tag){
|
|
|
+ var arr = []
|
|
|
+ for(var i = startIndex;i<endIndex;i++){
|
|
|
+ if(data[i].type == 'tag'){
|
|
|
+ if(data[i].text.indexOf(tag)!=-1){
|
|
|
+ arr.push(
|
|
|
+ {
|
|
|
+ tag: data[i].text,
|
|
|
+ index:i
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ //修改html
|
|
|
+ changeHtml(data,tag){
|
|
|
+ var startIndex = 0
|
|
|
+ var sign = false
|
|
|
+ var endIndex = 0
|
|
|
+ var currentIndex = 0
|
|
|
+ var currentIndex1 = 0
|
|
|
+ for(var i = 0;i<data.length;i++){
|
|
|
+ if(data[i].type == 'text'){
|
|
|
+ if(this.selectObj.startIndex >= currentIndex && this.selectObj.startIndex<=currentIndex + data[i].text.length && !sign){
|
|
|
+ startIndex = i
|
|
|
+ sign = true
|
|
|
+ }else{
|
|
|
+ if(!sign){
|
|
|
+ currentIndex += data[i].text.length
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if(this.selectObj.endIndex >= currentIndex1 && this.selectObj.endIndex<=currentIndex1 + data[i].text.length){
|
|
|
+ endIndex = i
|
|
|
+ break
|
|
|
+ }else{
|
|
|
+ currentIndex1 += data[i].text.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var arr = []
|
|
|
+ var item = data[startIndex]
|
|
|
+ if(startIndex == endIndex){
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ var nextTag = this.checkNextTag(data,startIndex,tag)
|
|
|
+ if(prevTag && nextTag){
|
|
|
+ if(this.selectObj.startIndex == currentIndex && this.selectObj.endIndex == currentIndex+item.text.length){
|
|
|
+ if(prevTag.tag == `<${tag}>` && nextTag.tag == `</${tag}>`){
|
|
|
+ data[prevTag.index].del = true
|
|
|
+ data[nextTag.index].del = true
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(this.selectObj.startIndex > currentIndex && this.selectObj.endIndex == currentIndex+item.text.length){
|
|
|
+ if(prevTag.tag == `<${tag}>` && nextTag.tag == `</${tag}>`){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ if(nextTag.index != endIndex + 1){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ }
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }else if(this.selectObj.startIndex == currentIndex && this.selectObj.endIndex < currentIndex+item.text.length){
|
|
|
+ if(prevTag.tag == `<${tag}>` && nextTag.tag == `</${tag}>`){
|
|
|
+ if(prevTag.index != startIndex - 1){
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ }
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.endIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.endIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }else if(this.selectObj.startIndex > currentIndex && this.selectObj.endIndex < currentIndex+item.text.length){
|
|
|
+ if(prevTag.tag == `<${tag}>` && nextTag.tag == `</${tag}>`){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,this.selectObj.endIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.endIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex-currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:this.selectObj.text})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.endIndex-currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ var nextTag = this.checkNextTag(data,startIndex,tag)
|
|
|
+ var betweenTag = this.checkBetweenTag(data,startIndex,endIndex,tag)
|
|
|
+ var item1 = data[endIndex]
|
|
|
+ if(betweenTag.length==0){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ if(betweenTag.length == 1){
|
|
|
+ data[betweenTag[0].index].del = true
|
|
|
+ if(betweenTag[0].tag == `<${tag}>`){
|
|
|
+ if(this.selectObj.endIndex == currentIndex1 && this.selectObj.endIndex < currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }else if(this.selectObj.endIndex > currentIndex1 && this.selectObj.endIndex < currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex > currentIndex1 && this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ var nextTag = this.checkNextTag(data,endIndex,tag)
|
|
|
+ if(nextTag.index != endIndex+1){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[nextTag.index].del = true
|
|
|
+ }
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.selectObj.startIndex == currentIndex && this.selectObj.startIndex < currentIndex + item.text.length){
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ if(prevTag.index != startIndex -1){
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[prevTag.index].del = true
|
|
|
+ }
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }else if(this.selectObj.startIndex > currentIndex && this.selectObj.startIndex < currentIndex + item.text.length){
|
|
|
+
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex > currentIndex && this.selectObj.startIndex == currentIndex + item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if(betweenTag.length == 2){
|
|
|
+ data[betweenTag[0].index].del = true
|
|
|
+ data[betweenTag[1].index].del = true
|
|
|
+ if(betweenTag[0].tag == `<${tag}>` && betweenTag[1].tag == `</${tag}>`){
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex+ item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ var len = arr.length
|
|
|
+ arr = []
|
|
|
+ if(this.selectObj.endIndex == currentIndex1){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(betweenTag[0].tag == `</${tag}>` && betweenTag[1].tag == `<${tag}>`){
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ if(prevTag.index != startIndex -1){
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[prevTag.index].del = true
|
|
|
+ }
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex + item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ var len = arr.length
|
|
|
+ arr = []
|
|
|
+ if(this.selectObj.endIndex == currentIndex1){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ var nextTag = this.checkNextTag(data,endIndex + len - 1,tag)
|
|
|
+ if(nextTag.index != endIndex + len){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[nextTag.index].del = true
|
|
|
+ }
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(var j = 0;j<betweenTag.length;j++){
|
|
|
+ data[betweenTag[j].index].del = true
|
|
|
+ }
|
|
|
+ if(betweenTag.length % 2==1){
|
|
|
+ if(arr[0] == `</${tag}>`){
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ if(prevTag.index != startIndex -1){
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[prevTag.index].del = true
|
|
|
+ }
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex + item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.selectObj.endIndex == currentIndex1){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ var nextTag = this.checkNextTag(data,endIndex,tag)
|
|
|
+ if(nextTag.index != endIndex +1){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[nextTag.index].del = true
|
|
|
+ }
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(arr[0] == `</${tag}>`){
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ var prevTag = this.checkPrevTag(data,startIndex,tag)
|
|
|
+ if(prevTag.index != startIndex -1){
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[prevTag.index].del = true
|
|
|
+ }
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex + item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ var len = arr.length
|
|
|
+ arr = []
|
|
|
+ if(this.selectObj.endIndex == currentIndex1){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ var nextTag = this.checkNextTag(data,endIndex + len - 1,tag)
|
|
|
+ if(nextTag.index != endIndex + len){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ }else{
|
|
|
+ data[nextTag.index].del = true
|
|
|
+ }
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex+ item.text.length){
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,item.text.length -1)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(item.text.length -1,item.text.length)})
|
|
|
+ data.splice(endIndex,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item.text.substring(0,this.selectObj.startIndex - currentIndex)})
|
|
|
+ arr.push({type:'tag',text:`<${tag}>`})
|
|
|
+ arr.push({type:'text',text:item.text.substring(this.selectObj.startIndex - currentIndex,item.text.length)})
|
|
|
+ data.splice(startIndex,1,...arr)
|
|
|
+ }
|
|
|
+ var len = arr.length
|
|
|
+ arr = []
|
|
|
+ if(this.selectObj.endIndex == currentIndex1){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else if(this.selectObj.endIndex == currentIndex1 + item1.text.length){
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ arr.push({type:'text',text:item1.text.substring(0,this.selectObj.endIndex - currentIndex1)})
|
|
|
+ arr.push({type:'tag',text:`</${tag}>`})
|
|
|
+ arr.push({type:'text',text:item1.text.substring(this.selectObj.endIndex - currentIndex1,item1.text.length)})
|
|
|
+ data.splice(endIndex + len - 1,1,...arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let temInnerHtml = '';
|
|
|
+ data.forEach(function (item) {
|
|
|
+ if(!item.del){
|
|
|
+ temInnerHtml = temInnerHtml + item.text;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return temInnerHtml;
|
|
|
+ return
|
|
|
+ // var currentHtml = this.$refs.myEditBox.outerHTML
|
|
|
+ var currentHtml = this.$refs.myEditBox.innerHTML
|
|
|
+ // var num = outerHTML.length - currentHtml.length + 6
|
|
|
+ // console.log(outerHTML,outerHTML.length,currentHtml,currentHtml.length,num)
|
|
|
+ var num = 0
|
|
|
+ var startHtml = currentHtml.substring(0,this.selectObj.startIndex-num )
|
|
|
+ var endHtml = currentHtml.substring(this.selectObj.endIndex-num ,currentHtml.length)
|
|
|
+ var centerHtml = currentHtml.substring(this.selectObj.startIndex-num,this.selectObj.endIndex-num)
|
|
|
+ var regx = new RegExp(`<${tag}>|</${tag}>`,'g')
|
|
|
+ var arr = centerHtml.match(regx)
|
|
|
+ if(!arr){
|
|
|
+ centerHtml = `<${tag}>`+centerHtml+`</${tag}>`
|
|
|
+ }else{
|
|
|
+ if(arr.length == 1){
|
|
|
+ if(arr[0] == `<${tag}>`){
|
|
|
+ centerHtml = centerHtml+`<${tag}>`
|
|
|
+ }else{
|
|
|
+ centerHtml = `</${tag}>` + centerHtml
|
|
|
+ }
|
|
|
+ }else if(arr.length == 2){
|
|
|
+ centerHtml = centerHtml.replace(regx,'')
|
|
|
+ if(arr[0] == `<${tag}>` && arr[1] == `</${tag}>`){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ centerHtml = `</${tag}>` + centerHtml +`<${tag}>`
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ centerHtml = centerHtml.replace(regx,'')
|
|
|
+ if(arr.length%2==1){
|
|
|
+ if(arr[0] == `</${tag}>`){
|
|
|
+ centerHtml = `</${tag}>` + centerHtml
|
|
|
+ }else{
|
|
|
+ centerHtml = centerHtml + `<${tag}>`
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(arr[0] == `</${tag}>`){
|
|
|
+ centerHtml = `</${tag}>` + centerHtml + `<${tag}>`
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // var str = startHtml+centerHtml+endHtml
|
|
|
+ // var a = /<div.*(data-type="myEditBox").*?>(.*?)<\/div>/g
|
|
|
+ // console.log(str.match(a))
|
|
|
+ return startHtml+centerHtml+endHtml
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getLocation(node, selectObj){
|
|
|
+ var baseNode = node;
|
|
|
+ var anchorNodePosition = this.getPosition1(baseNode, selectObj.anchorNode, selectObj.anchorOffset);
|
|
|
+ var focusNodePosition = this.getPosition1(baseNode, selectObj.focusNode, selectObj.focusOffset);
|
|
|
+ var num = Math.max(anchorNodePosition, focusNodePosition)
|
|
|
+ var num1 = Math.min(anchorNodePosition, focusNodePosition)
|
|
|
+ return {
|
|
|
+ startIndex:num1,
|
|
|
+ endIndex:num
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getAllDom(baseNode,path){
|
|
|
+ var temPath = path
|
|
|
+ if (baseNode != null) {
|
|
|
+ if(baseNode.nodeType == 1){
|
|
|
+ temPath.push(baseNode);
|
|
|
+ }
|
|
|
+ if (baseNode.childNodes.length > 0) {
|
|
|
+ for (let i = 0; i < baseNode.childNodes.length; i++) {
|
|
|
+ this.getAllDom(baseNode.childNodes[i], temPath);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //根据节点获取给定node中offset位置在栏位中的实际位置
|
|
|
+ getPosition1(baseNode, node, offset) {
|
|
|
+
|
|
|
+ let path = [];
|
|
|
+ this.getNodes(baseNode, path);
|
|
|
+ let retIdx = 0;
|
|
|
+ for (let i = 0; i < path.length; i++) {
|
|
|
+ if (path[i] == node) {
|
|
|
+ retIdx += offset;
|
|
|
+ return retIdx;
|
|
|
+ } else {
|
|
|
+ if (path[i].nodeType == 3) {
|
|
|
+ retIdx += path[i].nodeValue.length;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return retIdx
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加标签
|
|
|
+ addTag(data,tag){
|
|
|
+ var currentIndex = 0
|
|
|
+ var allMessage = []
|
|
|
+ console.log(this.selectObj)
|
|
|
+ for(var index = 0;index<data.length;index++){
|
|
|
+ var item = data[index]
|
|
|
+ if(item.type == 'text'){
|
|
|
+ if(this.selectObj.startIndex == currentIndex && (this.selectObj.startIndex + this.selectObj.text.length) == (currentIndex + item.text.length)){
|
|
|
+ if(index!=0 && data[index-1].type == 'tag'){
|
|
|
+ var tagIndex = data[index-1].text.indexOf(tag)
|
|
|
+ if(tagIndex!=-1){
|
|
|
+ allMessage[index-1].del = true
|
|
|
+ data[index+1].del = true
|
|
|
+ currentIndex = currentIndex + item.text.length;
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:this.selectObj.text})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex >= currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<=(currentIndex + item.text.length)){
|
|
|
+ if(index!=0 && data[index-1].type == 'tag'){
|
|
|
+ var tagIndex = data[index-1].text.indexOf(tag)
|
|
|
+ if(tagIndex!=-1){
|
|
|
+ if(this.selectObj.startIndex > currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)==(currentIndex + item.text.length)){
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,this.selectObj.startIndex-currentIndex)})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(this.selectObj.startIndex-currentIndex,item.text.length)})
|
|
|
+ data[index+1].del = true
|
|
|
+ currentIndex = currentIndex + item.text.length;
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<(currentIndex + item.text.length)){
|
|
|
+ allMessage[index-1].del = true
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex-currentIndex + this.selectObj.text.length))})
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex + this.selectObj.text.length),item.text.length)})
|
|
|
+ currentIndex = currentIndex + item.text.length;
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex > currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<(currentIndex + item.text.length)){
|
|
|
+
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex-currentIndex))})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex),this.selectObj.startIndex-currentIndex + this.selectObj.text.length)})
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex + this.selectObj.text.length),item.text.length)})
|
|
|
+ currentIndex = currentIndex + item.text.length;
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if(this.selectObj.startIndex > currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)==(currentIndex + item.text.length)){
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,this.selectObj.startIndex-currentIndex)})
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(this.selectObj.startIndex-currentIndex,item.text.length)})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex == currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<(currentIndex + item.text.length)){
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex -currentIndex + this.selectObj.text.length))})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex + this.selectObj.text.length),item.text.length)})
|
|
|
+
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex > currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<(currentIndex + item.text.length)){
|
|
|
+
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex-currentIndex))})
|
|
|
+ allMessage.push({ type:'tag', text:`<${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex),this.selectObj.startIndex -currentIndex + this.selectObj.text.length)})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex-currentIndex + this.selectObj.text.length),item.text.length)})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex >= currentIndex && this.selectObj.startIndex < (currentIndex + item.text.length) && (this.selectObj.startIndex + this.selectObj.text.length)>(currentIndex + item.text.length)){
|
|
|
+ if(index +1 < data.length && data[index+1].type == 'tag'){
|
|
|
+ var tagIndex = data[index+1].text.indexOf(`${tag}`)
|
|
|
+ if(tagIndex!=-1){
|
|
|
+ data[index +1].del = true
|
|
|
+ // currentIndex = currentIndex + item.text.length;
|
|
|
+ // continue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.selectObj.startIndex == currentIndex){
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,item.text.length)})
|
|
|
+ // allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ }else{
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex - currentIndex))})
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex - currentIndex),item.text.length)})
|
|
|
+ // allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex < currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)>currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)<(currentIndex+ item.text.length) ){
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring(0,(this.selectObj.startIndex + this.selectObj.text.length - currentIndex))})
|
|
|
+ if(!data[index -1].del){
|
|
|
+ allMessage.push({ type:'tag', text:`</${tag}>`})
|
|
|
+ }
|
|
|
+
|
|
|
+ allMessage.push({ type:'text', text:item.text.substring((this.selectObj.startIndex + this.selectObj.text.length - currentIndex),item.text.length)})
|
|
|
+ }
|
|
|
+ else if(this.selectObj.startIndex < currentIndex && (this.selectObj.startIndex + this.selectObj.text.length)>(currentIndex + item.text.length)){
|
|
|
+ if(index +1 < data.length && data[index+1].type == 'tag'){
|
|
|
+ var tagIndex = data[index+1].text.indexOf(tag)
|
|
|
+ if(tagIndex!=-1){
|
|
|
+ data[index +1].del = true
|
|
|
+ // allMessage.push(item)
|
|
|
+ // currentIndex = currentIndex + item.text.length;
|
|
|
+ // continue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ allMessage.push(item)
|
|
|
+ }else{
|
|
|
+ allMessage.push(item)
|
|
|
+ }
|
|
|
+ currentIndex = currentIndex + item.text.length;
|
|
|
+ }else{
|
|
|
+ allMessage.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let temInnerHtml = '';
|
|
|
+ allMessage.forEach(function (item) {
|
|
|
+ if(!item.del){
|
|
|
+ temInnerHtml = temInnerHtml + item.text;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return temInnerHtml;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ getColumn(node, selectObj,method='getPosition') {
|
|
|
+ var baseNode = node;
|
|
|
+ var anchorNodePosition = this[method](baseNode, selectObj.anchorNode, selectObj.anchorOffset);
|
|
|
+ var focusNodePosition = this[method](baseNode, selectObj.focusNode, selectObj.focusOffset);
|
|
|
+ var num = Math.min(anchorNodePosition, focusNodePosition)
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+ getNodes(baseNode, path) {
|
|
|
+ // 拿到所有类型的节点
|
|
|
+ var temPath = path;
|
|
|
+ if (baseNode != null) {
|
|
|
+ temPath.push(baseNode);
|
|
|
+ if (baseNode.childNodes.length > 0) {
|
|
|
+ for (let i = 0; i < baseNode.childNodes.length; i++) {
|
|
|
+ this.getNodes(baseNode.childNodes[i], temPath);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getPosition(baseNode, node, offset) {
|
|
|
+ //根据节点获取给定node中offset位置在栏位中的实际位置
|
|
|
+ let path = [];
|
|
|
+ this.getNodes(baseNode, path);
|
|
|
+ var retIdx = 0;
|
|
|
+ for (let i = 0; i < path.length; i++) {
|
|
|
+ if (path[i] == node) {
|
|
|
+ retIdx += offset;
|
|
|
+ return retIdx;
|
|
|
+ } else {
|
|
|
+ if (path[i].nodeType == 3) {
|
|
|
+ retIdx += path[i].nodeValue.length;
|
|
|
+ }else if(i!=0 && path[i].nodeType == 1){
|
|
|
+ retIdx += path[i].outerHTML.length;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return retIdx
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|