Javascript 所见即所得的逻辑

Javascript WYSIWYG Logic

本文关键字：所见即所得 Javascript      更新时间：2023-09-26

我已经在SO中搜索了类似的问题，但似乎它们都包含在使用contenteditable="true"使div可编辑中。

我很好奇跟踪添加到文档的所有格式标签的最有效方法。 由于重叠标签损坏，仅使用 jQuery 包装/展开所选文本似乎会在几次编辑后损坏文档。

正确的方法是将所有字符分成一个数组，制定一个逻辑来在window.getSelection()定义的位置添加/修改/删除标签，然后渲染输出版本以加载到可编辑的div中？ 还是有更好的解决方案？

可能没有必要使用 javascript/jquery 手动将元素包装在标签中。 我一直在阅读有关execCommand()的文章，它似乎得到了广泛的支持。 这将允许在所见即所得编辑器中找到的大多数格式选项，颜色，字体大小，系列，添加链接等...... 我意识到我最初的问题有点宽泛，但也许这也将为其他人指明正确的方向......

例子：

document.execCommand('bold', 0);
document.execCommand('forecolor', 0, '#ff0000');
document.execCommand('fontSize', 0, '7');

在chrome/firefox/safari中工作，还不确定IE。 上面的粗体示例演示了浏览器如何跟踪现有格式并可以打开/关闭样式。

相关文章：