How to set content_css for TinyMCE in Wicket?

Question

I am kinda new to wicket and am trying to set the content_css for a tinymce editor. But can't figure out how to reference our site's style sheets via CssResourceReference. I just want to reference the style sheets I have in our regular wicket markup (<link href="c/lw.css" ...>) so the preview in tinymce looks right. In code:

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

What goes into setContentCss ? Whatever I try with

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

points to something weird with wicket/resource/wicket.contrib.tinymce... but never to the actual location of our style sheets.

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

You might want to have a look at this SO question: Styling text for textarea Wicket

edited May 23 '17 at 12:04

Community

1
1

answered Jun 29 '12 at 11:46

Thariama

50,002
13
138
166

Thanks, I already saw that. Maybe I wasn't clear. I want to do this using the wicket-stuff-tinymceplugin just as a comment in the question you linked suggested. – mplwork Jun 29 '12 at 12:01

score 0 · Answer 2 · answered Jan 22 '13 at 20:18

0

Probably a bit late with the answer, but considering "c/lw.css" works in html, you should have written the same in the resourcereference:

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

answered Jan 22 '13 at 20:18

cserepj

926
6
9

Thanks. I think I tried that but ended up with something relative to TinyMCE as suggested in my question. I don't remember, too long ago. But I've given up TinyMCE anyway and replaced it with CKEditor. – mplwork Mar 21 '13 at 18:11

score 0 · Answer 3 · answered Oct 23 '14 at 13:22

The css stylesheet that should style TinyMCE editor can be added this way (the css file should be placed in the same package as the java class):

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));

Full example:

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>

To style e.g. width and height of the TinyMCE editor use id of the textarea (it should be specified in file "style.css" - file that styles the html page):

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

To style the typing area of the TinyMCE editor e.g. font-size, color, ..., use the resource file (in this example file "tinymce.css") and css selector body:

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

This example was tested using: wicket.version 6.17.0 and wicketstuff-tinymce version 6.16.0.

How to set content_css for TinyMCE in Wicket?

3 Answers3