Mark.js contenteditable - 在输入上运行 Mark

如何解决Mark.js contenteditable - 在输入上运行 Mark

我正在制作一个带有 contenteditable div 的“单词检查器”，同时使用 mark.js 来突出某些单词/单词组。

我遇到的问题是，在输入（复制/粘贴）单词时，我找不到“运行”mark.js 的方法。

我尝试通过向 textarea 添加事件侦听器来实现此目的，但这会引发错误：标记未定义。 textarea.addEventListener("input",mark); 并将标记更改为实例 {{1 }} 这给了我一个错误：TypeError: Property 'handleEvent' is not callable.。 Here is the fiddle。

我还查看了在 SO 和 google 上找到的各种示例，但我似乎无法找到我正在寻找的内容。我找到的最接近的东西是 this，但我仍然无法到达 work。

任何帮助将不胜感激。如果我可以提供任何其他信息，请告诉我。

textarea.addEventListener("input",instance);

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,className: "brown","?"]
   }
});

instance.mark(green,className: "green","?"]
   }
});

textarea.addEventListener("input",mark);

.red {
    background-color: lightcoral;
}

.green{
    background-color: lightgreen;
}

.brown{
    background-color: burlywood;
}

解决方法

您可以将所有 instance.mark(...) 调用放到一个单独的函数中（例如 markWords）。 然后，您可以在输入文本更改时调用该函数：

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,className: "brown","?"]
     }
  });

  instance.mark(green,className: "green","?"]
     }
  });
}

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

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