在样式表中格式化标题

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

这些文档意味着您可以使用样式表,在其中以某种形式定义所有内容,并在编辑器中对其进行分析和使用。 我可以做到这一点,但只能与类(右侧面板第二个框)。 该文档给出了一个示例,但仅限于类,而不是容器。 有一个指向完整样式表的链接,但是它是一个死链接,而示例中使用的样式表只定义了类并没有容器。

那么我如何在编辑器中制作一个红色的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) 。 我现在还不知道如何。 那里的大问题是我需要区分预览对话框和其他对话框。


更新

我看到,当使用postInitDialog时,您可以使用对话窗口作为wdw 。 这很酷。 你做这件事的方式(看你的更新)和Diaolog一样

看看下面的图片。 我在打开预览对话框时调试它。
看看行号。 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文件。 在这个文件中,做所有需要的定制:)

    希望它有帮助!


    正如你看到的那些只是样本。 你不能在线使用它作为编辑器。 你将不得不下载并尝试使用它。

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

    以上显示了例子的列表。 在那你已经尝试了第一个链接。

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

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

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

    希望这可以帮助。

    正如你所预测的那样,在提交任何内容时都会得到反映。

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

    编写你自己的代码,点击预览会在新的弹出窗口中获得结果。

    链接地址: http://www.djcxy.com/p/15913.html

    上一篇: formatting headings in stylesheet

    下一篇: WYMeditor inserting a <br /> when empty