3

我在可编辑的内容中有一些词<div>需要与文本的其余部分不同的颜色。问题是我不希望用户能够使用不同的颜色样式，他们仍然应该能够删除蓝色字。

<div id="textarea" contenteditable>Hello world<span style="color: blue">!</span>
</div>

用户的输入是否可能不受颜色样式的影响？

4

2 回答 2

3

与其使整个 DIV 可编辑，不如将其分成单独的跨度，以便您可以指定单独的可编辑性。

<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>
</div>

于 2019-11-11T20:17:37.523 回答
2

你还没有真正为我们提供足够的继续 - 例如。确定什么是蓝色什么不是蓝色的规则是什么？蓝色文字总是感叹号吗？它总是在最后吗？

听起来您需要的是构建一个简单的轻量级代码编辑器并应用您想要的规则。它的工作方式是在与“显示”div 相同的空间中创建一个透明的可编辑 div。可编辑文本区域的内容是不可见的，而“显示” div 的内容是可见的。对于每个击键，您获取可编辑文本区域的内容并将其写入“显示”div 并应用任何自定义规则。这是一个简单的小提琴显示我的意思：

https://jsfiddle.net/ymdrfupb/1/

const editable = document.querySelector('.editor > [contenteditable]');
const display = document.querySelector('.editor > .display');

function setDisplayContent(text) {
  // wrap any non-alphanumeric trailing characters with a blue span
  display.innerHTML = text.replace(/([^\w]+)$/, '<span class="blue">$1</span>');
}

editable.addEventListener('input', (ev) => {
  setDisplayContent(ev.target.innerHTML);
});

setDisplayContent(editable.innerHTML);
于 2019-11-11T21:13:32.763 回答