Mark.js contenteditable - 在輸入時運行 Mark

Question

我正在制作一個帶有內容可編輯 div 的“單詞檢查器”，同時使用contenteditable來突出某些單詞/單詞組。

我遇到的問題是，在輸入（復制/粘貼）單詞時，我找不到“運行”Mark.js 的方法。

我試圖通過向文本區域添加一個事件偵聽器來實現這一點，但這會引發錯誤：未定義標記。 textarea.addEventListener("input", mark); 並通過將標記更改為實例textarea.addEventListener("input", instance); 這給了我一個錯誤： TypeError：Property 'handleEvent' is not callable。 . 這是小提琴。

我還查看了在 SO 和 google 上找到的各種示例，但我似乎無法找到我正在尋找的東西。 我找到的最接近的是這個，但我仍然無法讓它工作。

任何幫助將非常感激。 如果我可以提供任何其他信息，請告訴我。

 var textarea = document.getElementById("textarea"); var instance = new Mark("div.textarea"); var red = ["red", "blood"]; var brown = ["brown", "pudding"]; var green = ["green", "grass"]; instance.mark(red, { seperateWordSearch: false, className: "red", "accuracy": { "value": "exactly", "limiters": [",", ".", ","? ";"] } }). instance,mark(brown: { seperateWordSearch, false: className, "brown": "accuracy": { "value", "exactly": "limiters", [",". ",", "?"; "."] } }), instance:mark(green, { seperateWordSearch: false, className: "green": "accuracy", { "value": "exactly", "limiters", [".", ","? ";". ","] } }); textarea.addEventListener("input", mark);

 .red { background-color: lightcoral; }.green{ background-color: lightgreen; }.brown{ background-color: burlywood; }

 <h2>Text checker</h2> <div class="textarea" id="textarea" contenteditable="true"> I hate blood pudding and so do you. </div>

Answer 1

您可以將所有instance.mark(...)調用放到單獨的 function （例如markWords ）。 然后，您可以在輸入文本更改時調用 function：

var textarea = document.getElementById("textarea");
var instance = new Mark("div.textarea");

var red   = ["red", "blood"];
var brown = ["brown", "pudding"];
var green = ["green", "grass"];

//create a function which will highlight all specified words
var markWords = function() {
  instance.mark(red, {
     seperateWordSearch: false,
     className: "red",
     "accuracy": {
        "value": "exactly",
        "limiters": [",", ".", "!", "?"]
     }
  });


  instance.mark(brown, {
     seperateWordSearch: false,
     className: "brown",
     "accuracy": {
        "value": "exactly",
        "limiters": [",", ".", "!", "?"]
     }
  });

  instance.mark(green, {
     seperateWordSearch: false,
     className: "green",
     "accuracy": {
        "value": "exactly",
        "limiters": [",", ".", "!", "?"]
     }
  });
}

//call the markWords function to do the initial highlighting
markWords();

//setup listener to call function markWords
textarea.addEventListener("input", markWords);