Question

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

从其他来源导入文字
将样式应用于文本
- 样式是预定义的（例如样式＆＃34; 1级和＃34;可以使文本变为粗体，绿色和斜体。
- 一种样式效果是在选择之前和之后添加字符，例如，文字之前和之后有两颗星
- 样式适用于完整单词，不适用于
- 无法编辑/更改文字，只应添加样式
文章文本必须保存在版本编辑的庄园中，例如编辑者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
}

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

1 个答案: