Question

如何使用jQuery或直接javascript，如何识别/选择/选择包含contentEditable的div中的单行文本，并仅为该行文本添加格式？

我目前有一个div，其contentEditable设置为true，允许用户编辑div的内容，根据需要添加/删除文本。但是，我希望用户也能够双击div中的任何文本行，并使用不同的格式样式标记该行。 （即将整行文本包含在跨度中，然后设置样式。请注意，我可以轻松设置跨度样式。我的问题在于识别用户单击的文本行并将其括在span标记中）

请注意，由于用户可以添加大量内容，因此div本身是可滚动的，因此任何解决方案都应该能够处理滚动。

Answer 1

jQuery fieldSelection plugin将允许您获取用户选择的文本。

对于使用span包装选定的行，通常的jQuery $().wrap()方法应该可以解决问题。

Answer 2

对于Firefox，您可以使用：

// This will give the first selection:
var range = window.getSelection().getRangeAt(0);
var txt = range.toString();
var spn = document.createNode('span');
spn.innerHTML = txt;
// Here you can apply style to spn
range.surrondContents(spn); // It will surround your selected text

以下是获取更多帮助的链接： https://developer.mozilla.org/en/DOM/range.surroundContents

对于IE，您可以使用：您也可以在IE中使用相同的过程..使用范围和选择..

希望它能解决你的问题。

单击时如何格式化div中的文本行？

2 个答案: