javascript - 用 JS 制作自定义文本编辑器(styler)

Question

我被要求创建一个具有以下功能的文本编辑器:

• 从其他来源导入文本
• 对文本应用样式
  • 样式是预定义的(例如样式“Level 1”可能会使文本变为粗体、绿色和斜体。
  • 一种样式效果是在选择前后添加字符，例如，文本前后有两个星
  • 样式应用于完整单词，无部分
  • 无法编辑/更改文本，只能添加样式
• 文章文本必须保存在版本化庄园中，例如，编辑 A 在日期/时间戳添加了这些更改 ____。

最好的方法是什么？

我一直在玩 execCommand 并且它完成了大部分我想要的，除了我似乎无法使文本不可编辑，我无法在选择前后添加字符像这样，而且我无法跟踪个别变化。

我几乎在想我应该为每个单词制作一个标签并将它们当作对象对待，但我很难让它们可选择(就像在编辑器中一样用鼠标突出显示文本)。

有谁知道有这样的库吗？

Answer 1

我可以给你一部分解决方案:如何选择全词。我的脚本用于 textarea，但如果您想改用 div contenteditable，您可以进行一些更改。

JSFIDDLE DEMO

var lastSelectStart = 0;
var lastSelectEnd = 0;

saveSelection = function(){
    lastSelectStart = document.getElementById("text").selectionStart;
    lastSelectEnd = document.getElementById("text").selectionEnd;
}

selectWords = function(){

    var divEditable = document.getElementById("text");
    html = divEditable.innerHTML;

    var start = lastSelectStart;
    var end = lastSelectEnd;

    var before = html.substring(0,start);
    var after = html.substring(end);

    var split = before.match(/[ .,;]/gi);
    var startIndex  = before.lastIndexOf(split[split.length-1]) + 1;

    split = after.match(/[ .,;]/gi);
    var endIndex = after.indexOf(split[0]);
    endIndex = end + endIndex;

    divEditable.selectionStart = startIndex;
    divEditable.selectionEnd = endIndex;
    // startIndex is where you insert your stars and
    // (endIndex + number of stars added) is where you insert your stars again
}