如何用vue实现文本的编辑

文章数据是通过后台返回html数据，之后前端通过遍历生成一个大的html，然后渲染到页面上。，我如果我想要给这个文章新添加一个编辑功能应该怎么实现？

（文章内容不便展示，只通过文字描述完成本功能）

一般的话，编辑文本可以才用富文本编辑器或者采用word文档导出的方法解决此问题，但这里因为功能比较单一且后期会添加标注功能，所以必须通过自己实现。

一、首先准备一段html文本并通过v-html将此html绑定给某个元素以渲染（注意，每一段要有一个特殊的标识，方便后端通过这个特殊的标识去存储）。

二、利用window.getSelection();方法获取鼠标选中的文本

  var selection = window.getSelection();
      var s = selection.toString();
      //判断选中内容是否为空
      if (s.trim() == "") {
        console.log("内容为空");
        return false;
      }
      //判断是否开启编辑

      //获取选中内容
      var contentHtml = "";
      range = selection.getRangeAt(0);

三、解决浏览器兼容问题并获取自己要用的内容

if (window.getSelection) {
        //chrome,firefox,opera
        var container = document.createElement("div");
        container.appendChild(range.cloneContents());
        contentHtml = container.innerHTML;
      } else if (document.getSelection) {
        //其他
        var container = document.createElement("div");
        container.appendChild(range.cloneContents());
        contentHtml = container.innerHTML;
      } else if (document.selection) {
        //IE特有的
        contentHtml = document.selection.createRange().htmlText;
      }

四、定义一个变量来控制编辑的开启（data里面，这里就不做代码展示了），通过弹窗去修改要修改的内容，重要！！！！因为可能中间存在表格，所以设置了五层循环来寻找最顶层的段落标识来告诉后端到哪儿保存，保存什么东西。调用后端保存的方法

if (this.editor) {
          //编辑
          num = 1;
          var item = selection.baseNode;
          // console.log(item.parentNode);
          while (num <= 5) {
            if (
              item.parentNode.classList.contains("title_text") ||
              item.parentNode.classList.contains("menu") ||
              item.parentNode.classList.contains("plan_text")
            ) {
              onlyKeyArr.push(item.parentNode.getAttribute("onlyKey"));
              // onlyKey=item.parentNode.getAttribute("onlyKey");
              // console.log(onlyKeyArr);
              break;
            }
            item = item.parentNode;
           
            num++;
          }
          this.alertTxt = contentHtml;
          // console.log(onlyKey);
          this.$alert(
            `<div><textarea name="txt_remark" id="remark" style="width:20vw;height:20vh;">${contentHtml}</textarea></div> `,
            "修改文本",
            {
              dangerouslyUseHTMLString: true,
              beforeClose: (action, instance, done) => {
                console.log(action);
                var text = document.getElementById("remark").value;
                if (contentHtml == text) {
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = "执行中...";
                  this.$message("内容未改变");
                  instance.confirmButtonLoading = false;
                  // instance.confirmButtonText = "执行中...";
                  done();
                } else if (action == "cancel") {
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = "执行中...";
                  this.$message("内容被强制关闭");
                  instance.confirmButtonLoading = false;
                  done();
                } else {
                  var temp = $('<span id="temporary">' + text + "</span>");
                  // Range.surroundContents() 方法将 Range 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。
                  range.surroundContents(temp[0]);
                  $("#temporary").replaceWith(`${text.trim()}`);
                  // console.log(range);
                  this.editorSave = true;
                  //保存
                  if($(`span[onlykey=${onlyKeyArr}]`).html()){
                    this.savePlan(onlyKeyArr, $(`span[onlykey=${onlyKeyArr}]`).html());
                  }else{
                    this.savePlan(onlyKeyArr, range.endContainer.innerHTML);
                  }
                  done();
                }
              },
            }
          );
          // selection = range = "";
        }