Question

（javascript，角度/ cli）

我正在创建一个带有“ contenteditable” div元素的在线文本编辑器。单击按钮，将在光标所在位置将新的代码HTML标记插入文档，也可以对其进行修改。

如果将标记插入文档的最后位置，则用户无法从代码HTML标记中转义。每次插入代码标签时，我都会添加一个换行符，但是如果用户使用退格键将其删除，则光标会再次输入该代码标签，然后循环继续...

我正在考虑onfocus和onblur事件，对于用户单击代码标签之外的情况，它将返回该元素的contenteditable属性false，因此，如果用户在标签后使用退格键，会删除整个标签及其内容（我认为这样会更好）。

但是，焦点和模糊事件没有监听非输入标签。

  test(element){
      let sel, range;
      if(window.getSelection && (sel = window.getSelection()).rangeCount){
         range = sel.getRangeAt(0);
         range.collapse(true);

         let code = document.createElement("code");
         code.className="myCode";
         code.appendChild(document.createTextNode("Code example"));

         code.contentEditable="false";

         range.insertNode(code);
         range.setStartAfter(code);
         range.collapse(true);

         sel.removeAllRanges();
         sel.addRange(range);

         //adding whitespace at the end of the document

         element.insertAdjacentHTML('beforeend', '<br>');
   }
 }

您对我如何解决此问题有任何建议？

Answer 1

使用一个for循环当用户按下退格判断是否在某个标签的端部，然后依次通过找到标签开始的位置，然后使用.splice（）以去除标记和一切都在它< / p>

Answer 2

与此同时，我解决了这个问题，不是通过使用焦点和模糊事件（因为内容可编辑的HTMLelements不支持它们，而是通过选择选择nodeName来解决此问题。

用户必须单击代码标记以将其写入（使其内容可编辑），然后单击或退出该代码元素会将其切换回contenteditable =“ false”。相同的功能绑定到click和keydown事件。

selectionTest(content){
 if(document.querySelector("code")){                     //if there is no CODE element, return.
  if(document.getSelection){
    let sel = document.getSelection();                  
    let docs = document.querySelectorAll("code");       //Get all CODE elements     

    if(sel.baseNode.parentElement.nodeName === "CODE"){ // if the clicked element is CODE
      if(docs[0].contentEditable === "true"){           // and if the code contenteditable property is true
        return console.log("already true");             // quit the function
      } else {                                          // otherwise
        for(let i = 0 ; i < docs.length; i++){          // loop through and set all code tags to contenteditable
          docs[i].contentEditable = "true";
        }
      }
    } else {                                            // Otherwise if it is not CODE element...
      if(docs[0].contentEditable === "false"){
        return console.log("already false");
      } else {
        for(let i = 0 ; i < docs.length; i++){
          docs[i].contentEditable = "false";
        }
      }
    }
  }
}

}

在线文字编辑器-如何正确修复我的代码？

2 个答案: