设计模式和自定义操作？答案

【问题标题】：designMode and custom actions?设计模式和自定义操作？
【发布时间】：2011-10-18 18:40:59
【问题描述】：

所以我的最新项目需要使用 designMode（或创建富文本编辑器的类似方法），但我在使用默认命令时遇到了困难。我宁愿在选择器的位置插入我自己的 HTML。例如，我希望插入的图像具有对齐属性（当然，使用适当的 CSS）、插入 HTML5 视频标签等。是否有“首选”方法来执行此操作（使用 Javascript 或 jQuery）？

谢谢！

【问题讨论】：

标签： javascript jquery contenteditable designmode

【解决方案1】：

您不必为此使用document.execCommand()；没有它相对简单，而且更灵活。

我已经为在当前插入符号位置插入任意 HTML 的类似问题提供了答案：Insert html at caret in a contenteditable div。

【讨论】：

我编辑了代码，以便将“window”替换为 doc 变量。 var doc = document.getElementById(editorid).contentWindow;提供了 editorid 值。该代码在 firefox 和 chrome 中运行良好，但在 IE9 中不行。 :( 我在这里只包含了 js：jsfiddle.net/tNwFD。我使用的是 designMode 而不是 contenteditable。
@tundoopani：您需要同时使用 iframe 的 window 和 document 对象。我更新了你的代码：jsfiddle.net/tNwFD/1
非常感谢！它现在在 IE 中工作，但 HTML 总是添加在字段的开头。 ://
@tundoopani：问题可能是在 IE 中，选择/插入符号在您的按钮的 click 事件被触发时被破坏。您可以通过使用mousedown 事件来解决此问题，或者（更好）通过在IE 中使用unselectable="on" 使按钮无法选择。
似乎在 div 元素上使用 click 事件也会导致在触发 click 事件时破坏选择/插入符号。这发生在所有浏览器中。你知道为什么 div 元素而不是按钮会发生这种情况吗？同时，我将尝试使用 mousedown 事件。谢谢！