如何在 Wicket 中为 TinyMCE 设置 content_css？答案

【问题标题】：How to set content_css for TinyMCE in Wicket?如何在 Wicket 中为 TinyMCE 设置 content_css？
【发布时间】：2012-06-29 11:40:50
【问题描述】：

我对 wicket 有点陌生，正在尝试为 tinymce 编辑器设置 content_css。但不知道如何通过CssResourceReference 引用我们网站的样式表。我只想参考我们常规检票口标记 (<link href="c/lw.css" ...>) 中的样式表，因此 tinymce 中的预览看起来正确。在代码中：

TinyMCESettings s = new TinyMCESettings(TinyMCESettings.Theme.advanced);
s.setContentCss(????);

setContentCss 中有什么内容？无论我尝试什么

CssResourceReference css = new CssResourceReference(this.class, "lw.css");

用wicket/resource/wicket.contrib.tinymce... 指向一些奇怪的东西，但从不指向我们样式表的实际位置。

【问题讨论】：

标签： javascript tinymce wicket wicketstuff

【解决方案1】：

您可能想看看这个 SO 问题：Styling text for textarea Wicket

【讨论】：

谢谢，我已经看到了。也许我不是很清楚。我想使用 wicket-stuff-tinymceplugin 来执行此操作，就像对您建议的链接问题的评论一样。

【解决方案2】：

答案可能有点晚，但考虑到“c/lw.css”在 html 中有效，您应该在资源参考中写下相同的内容：

CssResourceReference css = new CssResourceReference(this.class, "c/lw.css");

【讨论】：

谢谢。我想我试过了，但最终得到了与我的问题中建议的 TinyMCE 相关的东西。不记得了，很久以前了。不过我还是放弃了 TinyMCE，换成了 CKEditor。

【解决方案3】：

可以这样添加应该设置TinyMCE编辑器样式的css样式表（css文件应该与java类放在同一个包中）：

TextArea ta = new TextArea("ta");
TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.advanced);
ResourceReference cssRef = new CssResourceReference(this.getClass(), "tinymce.css");
settings.setContentCss(cssRef);
ta.add(new TinyMceBehavior(settings));

完整示例：

Java

public class TinyMCEPage extends WebPage {

    public TinyMCEPage() {
        TextArea ta = new TextArea("ta");

        TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.advanced);
        ResourceReference cssRef = new CssResourceReference(this.getClass(), "tinymce.css");
        settings.setContentCss(cssRef);

        ta.add(new TinyMceBehavior(settings));
        add(ta);
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <textarea wicket:id="ta" id="ta" name="ta"></textarea>
</body>
</html>

风格，例如TinyMCE 编辑器的宽度和高度使用 textarea 的 id（应该在文件“style.css”中指定 - 设置 html 页面样式的文件）：

#ta {
    width: 800px;
    height: 600px;
}

为 TinyMCE 编辑器的输入区域设置样式，例如font-size, color, ...，使用资源文件（在这个示例文件“tinymce.css”中）和 css 选择器主体：

body {
    font-size: 14px;
    background-color: #ffeedd;
    border: 1px solid #333;
}

此示例已使用：wicket.version 6.17.0 和 wicketstuff-tinymce 版本 6.16.0 进行测试。

【讨论】：