javascript - 向内容编辑器添加自定义样式

Question

我有一个标准的内容编辑器，它使用 iFrame 作为文本区域，然后它执行的下拉菜单更改:

idContent.document.execCommand(cmd,"",opt);

其中“idContent”是 iFrame。

其中一个下拉菜单应该是样式，但它执行“formatBlock”命令。

我有一个自定义样式表。有没有办法将我创建的样式放入此样式下拉列表中？如果没有，我可以为这些自定义样式设置另一个下拉菜单，但设置这些样式的命令名称是什么？

这是我目前使用的下拉菜单和 javascript:

 <select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
    <option value="Normal">Normal</option>
    <option value="Heading 1">Heading 1</option>
    <option value="Heading 2">Heading 2</option>
    <option value="Heading 3">Heading 3</option>
    <option value="Heading 4">Heading 4</option>
    <option value="Heading 5">Heading 5</option>
    <option value="Address">Address</option>
    <option value="Formatted">Formatted</option>
    <option value="Definition Term">Definition Term</option>
  </select>

 function cmdExec(cmd,opt) 
    {   
    idContent.document.execCommand(cmd,"",opt);
         idContent.focus();
    }

Answer 1

可以将样式表链接到您当前正在编辑的文档，假设您在 iframe 中有一个处于设计模式的文档。样式表可以包含您喜欢的样式，您可以通过更改元素 CSS 类名或包装在具有类名的 HTML 元素中来应用这些样式。但是，您将无法使用 designMode 命令应用它。您必须使用选择和范围，并手动更改 HTML 标记以应用您想要的样式。

阅读以下文章，了解您可以应用的一般命令:https://developer.mozilla.org/en/Midas

以下文章将解释使用选择和范围的高级编辑技术: https://developer.mozilla.org/en/DOM/Selection

https://developer.mozilla.org/en/DOM/range