在样式表中格式化标题
我试图在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