wymeditor - 在样式表中格式化标题

Question

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

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

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

如果有人链接或提供样式表的完整示例，其中 h1 和 p 之类的容器也被格式化并在编辑器中使用，我将非常高兴。如果这不可能，还有其他方法可以做到吗？

---

编辑：

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

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

更新：

我看到您在使用postInitDialog 时可以使用wdw 访问对话窗口。这很酷。你这样做的方式（查看你的更新）你也可以为 Dialogo 做同样的事情

看下图。我在“预览”对话框打开时对其进行了调试。
看线号。 41

按照您对编辑器所做的操作，可以对预览执行相同操作 在线号。 41，你可以得到head并以同样的方式追加样式

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

初步回答：

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

• 使用正确的类，如文档所述 - 非常 编辑的目的就是这个。定制应该在上面完成 那里有什么
• 编辑您已链接的默认样式表或 当编辑器处于活动状态时加载（您可以使用检查来检查 元素）这在下面解释

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

查看它是否从另一个文件中加载样式 - wymiframe.css，行号。 51 用于p 标签

因此，如果您想更改或添加自己的样式，请转到该文件。 （如果您将鼠标悬停在拥有它的位置，您将获得文件路径，或者右键单击并在新标签中打开并从地址栏中检查）
添加或编辑样式h1 那里。完成。
此外，您可以转到 wymeditor/iframe/default 文件夹中的相应 html 文件。将您的自定义 link 添加到您自己的 css 文件中。在这个文件中，做所有需要的定制:)

希望对您有所帮助！

Answer 2

如您所见，这些只是示例。您不能将其用作在线编辑器。您必须下载并尝试使用它。

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

上面显示了示例列表。因为您已经尝试了第一个链接。

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

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

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

希望这会有所帮助。

正如您所要求的，它在预览中效果很好，提交时没有任何反映。

要在预览中实现这一点，请单击倒数第二个位置的 HTML 图标。

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