Question

我有以下内容步骤1.可编辑的div，可以键入一些文本。步骤2.我点击着色单词，可编辑div中的所有单词都包含在每个具有唯一ID的跨度中。步骤3.我可以选择5种不同的颜色并单击每个跨度以使其成为该颜色（在跨度中添加一个类）。

现在我可以选择保存彩色格式文本。

但是我也有一个名为“编辑文本”的按钮。单击此按钮，我可以再次编辑文本。

但我的问题是，我如何让jquery记住我有哪些颜色？

我写的一个例子：

我是一个快乐的人。

点击“着色”，可编辑的div变为不可编辑，显示5种颜色。我选择一种绿色，然后点击“开心”。我点击一个红色，然后点击“男人”。我现在在div中有以下html：

 <span id=1>I</span>
 <span id=2>am</span>
 <span id=3>a</span>
 <span id=4 class=green>happy</span>
 <span id=5 class=red>man</span>

所以现在我想编辑文本（点击“编辑文本”按钮）

所以我将文字改为：

我是一个非常幸福的人

然后我点击“着色”并期望：

 <span id=1>I</span>
 <span id=2>am</span>
 <span id=3>a</span>
 <span id=6>very</span>
 <span id=4 class=green>happy</span>
 <span id=5 class=red>man</span>

我怎样才能做到这一点？或者，如果我删除其中一个词，我希望span标签消失？

我一直在努力解决这个问题，任何想法？

Answer 1

我担心这会非常复杂。你可以记住基于对象中的单词，但这意味着这个单词的每个实例都会有这种颜色。也许是这样的......

var wordColors = {};
var colorWord = function (word, color) {
  span.css('color', color);
  wordColors[word] = color;
}
var onEditEnd = function () {
  // process spans etc
  var c;
  for (var i = 0; i < spans.length; ++i) {
    if (c = wordColors[span.innerHTML])
      span.css('color', c);
  }
}

对格式化的contenteditable div的更改

1 个答案: