wymeditor - 样式表中的格式标题

Question

我正在尝试在wymeditor中使用我网站上的相同样式。不幸的是这个编辑器几乎没有记录，所以我真的不知道该怎么做。

documentation意味着您可以使用样式表来定义某些形式的所有内容，并在编辑器中对其进行解析和使用。我可以这样做，但只能使用类（右侧面板上的第二个框）。文档提供了一个示例，但仅适用于类，而不适用于容器。有一个完整样式表的链接，但它是一个死链接，示例中使用的stylesheet只定义类而没有容器。

那么我如何在编辑器中制作一个红色的h1？或者至少在预览中。

如果有人链接或给出了样式表的完整示例，我会很高兴hl和p之类的容器也被格式化并在编辑器中使用。如果不可能，还有其他方法吗？

---

修改

我可以使用postInit向iframe注入CSS：

postInit: function(wym) {
    var $head = $(wym._box).find('iframe').contents().find("head");
    $head.append($("<link/>", { 
        rel: "stylesheet",
        href: costumIframeCss,
        type: "text/css"
     }));
}

现在我唯一需要的是对预览对话框做类似的事情。也许使用 postInitDialog（wym，wdw）。我真的不知道怎么样。最大的问题是我需要将预览对话框与其他对话框区分开来。

Answer 1

更新：

我在使用wdw时看到您可以访问postInitDialog对话框窗口。这很酷。你这样做的方式（查看你的更新）就像你对Diaolog一样

请看下面的图片。我调试了预览对话框，因为它打开了 看看行号。 41

按照您对编辑器所做的操作，可以对预览进行相同的操作 在第号行。 41，您可以获得head并以相同方式添加样式

var $head = $(wdw.document.body);
$head.append($("<link/>", { 
    rel: "stylesheet",
    href: customPreviewCss, // CSS for Preview Dialog
    type: "text/css"
}));

初步回答：

据我了解，您希望样式在编辑时生效。理想情况下，在编辑（或任何此类自定义）时，为了使h1红色，您只有以下选项：

• 使用正确的类，如文档中所述 - 非常 编辑的目的是这个。应该在上面进行定制 那是什么
• 修改您已关联的默认样式表或 在编辑器处于活动状态时加载 （您可以使用inspect检查它 元素）这在下面解释

我看到当你使用编辑器时，它会加载到iframe。 iframe有自己的样式。现在，检查元素。在您的情况下，它是h1，但我使用示例

中的p标记

看到它加载了来自其他文件的样式 - wymiframe.css，行号。 51代码的p

因此，如果您想要更改或添加自己的样式，请转到该文件。 （如果您悬停拥有它，则会获得文件路径，或者右键单击在新选项卡中打开并从地址栏中检查）
在那里添加或修改 h1的样式。完成。
此外，您可以转到html文件夹中的相应wymeditor/iframe/default文件。将自定义link添加到您自己的css文件中。在此文件中，执行所有需要的自定义：）

希望它有所帮助！

Answer 2

如您所见，这些只是样本。您不能在网上使用它作为编辑器。你必须下载它并尝试使用它。

http://files.wymeditor.org/wymeditor-0.5/examples/

以上显示了示例列表。你已尝试过第一个链接。

要下载它，请转到此链接。

http://www.wymeditor.org/download/

选择最近的稳定版本以减少缺陷。

希望这有帮助。

正如你所知，它在预览中效果很好，在提交时没有任何内容得到反映。

要在预览中实现该功能，请单击最后一个位置的HTML图标。

编写自己的代码，点击预览会在新的弹出窗口中显示结果。