Javascript 使用JS创建自定义文本编辑器（样式器）

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

• 从其他源导入文本
• 将样式应用于文本
  • 样式是预定义的（例如，样式“级别1”可以使文本粗体、绿色和斜体
  • 一种样式效果是在选择前后添加字符，例如，文本前后都有两颗星
  • 样式应用于完整单词，不应用于局部
  • 无法编辑/更改文本，只能添加样式
• 文章文本必须保存在ed manor版本中，例如编辑器a在日期/时间戳上添加了这些更改

最好的方法是什么

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

我几乎在想，我应该把每个单词都做成一个标签，并把它们当作对象对待，但我很难让它们成为可选择的（像在编辑器中那样用鼠标突出显示文本）

---

有人知道这种类型的库吗？

我可以给你一部分解决方案：如何选择完整的单词。我的脚本用于textarea，但如果你想改用div contenteditable，你可以做一些更改

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
}

---

谢谢你，我今天要玩这个。我遇到的唯一问题是我无法添加html来设置文本样式。我需要选择一些内容并将其变成蓝色等。我正在使用iFrame创建我自己的所见即所得，我想我会尝试将其合并。