3

我正在尝试在 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)。我还真不知道怎么做。最大的问题是我需要将预览对话框与其他对话框区分开来。

4

2 回答 2

3

更新：

我看到您在wdw使用时可以访问对话框窗口postInitDialog。这很酷。您的操作方式（查看您的更新）与 Dialoglog 一样

看下图。我调试了预览对话框，因为它打开了。
看线号。41

检查预览

按照您对编辑器所做的操作，可以对 Preview At 行执行相同操作。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 文件中。在这个文件中，做所有需要的定制:)

希望它有所帮助！

于 2012-12-27T17:50:42.050 回答
0

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

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

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

要下载它，请访问此链接。

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

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

希望这可以帮助。

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

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

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

于 2012-12-23T05:26:56.183 回答