SmartGwt – Ajustando la altura de un CKEditor

abril 22, 2013

Actualmente en nuestros proyectos utilizamos CKEditor como editor de texto. Aquí explico como integrarlo a SmartGwt.

El problema es que para que el Editor ocupe el 100% del espacio disponible (verticalmente), debes conocer la altura disponible en píxeles. Esto debido a que la propiedad ‘height’ de la configuración no acepta valores porcentuales 😦

height : Number/String
The height of the editing area (that includes the editor content). This can be an integer, for pixel sizes, or any CSS-defined >length unit.

Note: Percent units (%) are not supported.

Cuando utilizamos Layouts, la altura esta disponible hasta que se ‘pinta’ el control. Por lo tanto tenemos que modificar el tamaño del Editor en ese momento. Para modificar el tamaño podemos utilizar JSNI de la siguiente forma.

    public class TextEditor extends Layout {
        private final static Logger log = Logger.getLogger(TextEditor.class.getName());</p><pre><code>    private static final int BASE_FLOAT_ZINDEX = 1000000;

    private CKEditor ckeEditor;

    private Canvas canvas;

    public TextEditor() {
        addResizedHandler(new ResizedHandler() {

            @Override
            public void onResized(ResizedEvent event) {
                log.info("Resizing editor: 100%, " + getHeightAsString());
                resizeEditor(ckeEditor, "100%", getHeightAsString());
            }
        });
        CKConfig config = new CKConfig();
        config.setBaseFloatZIndex(BASE_FLOAT_ZINDEX);
        config.setUseFormPanel(false);
        ckeEditor = new CKEditor(config);
        ckeEditor.setSize("100%", "100%");
        canvas = new Canvas();
        canvas.addChild(ckeEditor);
        setMembers(canvas);
    }

    @Override
    protected void onDraw() {
        super.onDraw();
        Timer timer = new Timer() {
            @Override
            public void run() {
                // after is drawn we could get height of component
                log.info("Resizing editor: 100%, " + getHeightAsString());
                resizeEditor(ckeEditor, "100%", getHeightAsString());
            }
        };
        timer.schedule(1 * 1000);
    }

    private native void resizeEditor(CKEditor editor, String width,
            String height) /*-{
                var e = editor.@com.axeiya.gwtckeditor.client.CKEditor::editor;
                if(typeof(e) != 'undefined' &amp;&amp; e != null){
                    e.resize(width, height);
                }
            }-*/;
}
</code></pre><p>

Notesé que en el método onDraw utilizamos un Timer para modificar el tamaño del Editor. De no hacerlo así, me arrojaba un error debido a que el CKEditor aún no era agregado al DOM -supongo-. También llamamos al método resizeEditor cuando el tamaño del Layout es modificado (ResizedHandler).

Fuentes:
http://docs.ckeditor.com/#!/api/CKEDITOR.editor
http://docs.ckeditor.com/#!/api/CKEDITOR.config
http://ckeditor.com/forums/CKEditor-3.x/Setting-editor-area-height-100?page=1
gwt-ckeditor source

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: