TinyMCE Mixin in Tapestry 5

Um das Schreiben von Blog-Einträgen komfortabler zu gestalten haben wir TinyMCE in unser Blog eingebunden. Für TinyMCE müssen die TinyMCE-Javascripts in der Seite geladen und dann ein tinyMCE.init aufgerufen werden.

Bei Tapestry bietet sich hierfür ein Mixin an um nicht auf jeder Seite den Import der JS-Lib und den Init-Call einbauen zu müssen.

Das Mixin wird in Tapestry-Manier im Package “mixins” erstellt und heißt bei uns TinyMCE.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

package de.metacoder.blog.mixins;

import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.BeginRender;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.corelib.components.TextArea;

@Import(library = { "context:scripts/tiny_mce/tiny_mce.js" })
public class TinyMCE {

        @InjectContainer
        private TextArea textArea;

        @BeginRender
        public void enableTinyMCE(final MarkupWriter markupWriter) {
                markupWriter.writeRaw(
                        "<script type=\"text/javascript\">\n" +
                        "       tinyMCE.init({\n" +
                        "               mode : \"exact\",\n" +
                        "               elements: \"" + textArea.getClientId() + "\"\n" +
                        "       });\n" +
                        "</script>"
                );
        }
}

Sobald man dieses Mixin erstellt hat, kann man es im Template bei einer Textarea als Mixin angeben:

<t:textarea t:mixins="tinyMCE" t:id="content" t:value="blogEntry.content" />

Das sorgt dann automatisch dafür, dass die TinyMCE-Scripts in der Seite richtig geladen und der Editor initialisiert wird.