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

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

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

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

如果有人链接或给出了样式表的完整示例，其中 h1 和 p 等容器也被格式化并在编辑器中使用，我会非常高兴。如果这是不可能的，还有什么其他方法可以做到？

编辑:

我可以使用 postInit 将 CSS 注入(inject) 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) 。我真的不知道如何。最大的问题是我需要将预览对话框与其他对话框区分开来。

最佳答案

更新 :

我看到您可以在使用 wdw 时以 postInitDialog 的身份访问对话框窗口。这很酷。您这样做的方式(查看您的更新)与您在 Dialog 中所做的一样

看下图。我调试了预览对话框，因为它打开了。
看看行号。 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 的样式。完毕。
此外，您可以转到 html 文件夹中的相应 wymeditor/iframe/default 文件。将您的自定义 link 添加到您自己的 css 文件中。在这个文件中，做所有需要的定制:)

希望有帮助!

关于javascript - wymeditor - 在样式表中格式化标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13983133/