Integrando CKEditor en SmartGwt

septiembre 7, 2010

IMPORTANTE (30/09/2010): Encontré en google code un proyecto que integra el CKEditor en GWT, es el gwt-ckeditor. Para integrar este control a SmartGwt basta con ponerlo en un Canvas, cambiar el z-index a un valor mayor que el de los controles de SmartGwt y establecer la propiedad useFormPanel en false para evitar problemas con el tamaño según explico aquí.
Tiene mayores ventajas que la opción explicada en este articulo -como la personalizacion de la barra de herramientas y la creación de varias instancias-


(CKEditorItem dentro de un Layout de Smartgwt)

Para un proyecto necesitaba un editor que ofreciera un poco más de funcionalidad que el RichTextEditor que viene con SmartGwt. En internet encontré varios y el que me pareció la mejor elección fue el CKEditor.

Primero descarga el CKEditor y descomprime la carpeta ckeditor en la carpeta “project/client/public” de tu proyecto -si no existe el directorio, crealo-. Esto es para que cuando compiles se copien los archivos del CKEditor en la carpeta war de tu modulo.
Agrega la siguiente línea en el archivo xml de tu módulo

<script src=”ckeditor/ckeditor.js”></script>

Finalmente, edita el archivo “project/client/public/ckeditor/config.js” para evitar problemas con la visualización (z-index) del CKEditor.

config.baseFloatZIndex = 1000000;

Es todo lo que tienes que configurar, ya puedes utilizar las siguientes clases como se muestra a continuación.

CKEditorEntryPoint.java

public class CKEditorEntryPoint implements EntryPoint {

	private CKEditorItem txtEditor;
	private final static String DEFAULT_HTML_CONTENT="<h1>\n" +
			"	HTML Ipsum Presents</h1>\n" +
			"<p>\n" +
			"	<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="%5C%22#%5C%22">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>\n" +
			"<h2>\n" +
			"	Header Level 2</h2>\n" +
			"<ol>\n" +
			"	<li>\n" +
			"		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n" +
			"	<li>\n" +
			"		Aliquam tincidunt mauris eu risus.</li>\n" +
			"</ol>\n" +
			"<blockquote>\n" +
			"	<p>\n" +
			"		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>\n" +
			"</blockquote>\n" +
			"<h3>\n" +
			"	Header Level 3</h3>\n" +
			"<ul>\n" +
			"	<li>\n" +
			"		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n" +
			"	<li>\n" +
			"		Aliquam tincidunt mauris eu risus.</li>\n" +
			"</ul>\n" +
			"<pre>\n" +
			"&lt;code&gt;\n" +
			"#header h1 a { \n" +
			"	display: block; \n" +
			"	width: 300px; \n" +
			"	height: 80px; \n" +
			"}\n" +
			"&lt;/code&gt;</pre>";

	@Override
	public void onModuleLoad() {
		try {
			VLayout main = new VLayout();
			main.setSize("100%", "100%");
			DynamicForm frmEditor = new DynamicForm();
			frmEditor.setBorder("2px solid blue");
			frmEditor.setNumCols(1);
			txtEditor = new CKEditorItem("txtEditor");
			txtEditor.setValue(DEFAULT_HTML_CONTENT);
			txtEditor.setShowTitle(false);
			txtEditor.setWidth("50%");
			txtEditor.setHeight("100%");
			frmEditor.setItems(txtEditor);
			IButton btnPrintHTML = new IButton("Print HTML");
			btnPrintHTML.addClickHandler(btnPrintHTML_onClick);

			frmEditor.setSize("50%", "80%");
			main.setMembers(frmEditor, btnPrintHTML);
			main.draw();

		} catch (Exception exc) {
			SC.warn("An exception has occured:
" + exc.toString());
		}

	}

	private ClickHandler btnPrintHTML_onClick = new ClickHandler() {

		@Override
		public void onClick(ClickEvent event) {
			if (txtEditor.getValue() != null)
				SC.say("CKEditor value:
"
						+ StringUtil.asHTML(txtEditor.getValue().toString()));
			else {
				SC.say("type something in the editor!");
			}
		}
	};

}

CKEditor.java

public class CKEditor extends Canvas{
	{
		setOverflow(Overflow.VISIBLE);
		setCanDragResize(false);
		setRedrawOnResize(false);
		setZIndex(0);
	}
	private boolean loaded=false;

	public CKEditor(String id){
		super(id);
		addDrawHandler(new DrawHandler() {

			@Override
			public void onDraw(DrawEvent event) {
				loadCKEditor();
			}
		});
	}

	@Override
	public String getInnerHTML() {
		if(this.getContents() != null){
			return "<textarea style="" id=" + this.getID() + " _ta="">"+&lt;br /&gt;				getContents()+"</textarea>";
		}
		return "<textarea style="" id=" + this.getID() + " _ta=""></textarea>";
	}

//	@Override
//	public void draw() {
//		super.draw();
//		loadCKEditor();
//	}

	protected native void loadCKEditor()/*-{
		if(!this.@tsj.ckeditor.client.CKEditor::loaded){
			var ckEditorId=this.@tsj.ckeditor.client.CKEditor::getID()() + "_ta";
			$wnd.CKEDITOR.replace(ckEditorId);
	        this.@tsj.ckeditor.client.CKEditor::loaded=true;
		}
	}-*/;

	public boolean isLoaded() {
		return loaded;
	}
}

CKEditorItem.java

public class CKEditorItem extends CanvasItem {
	private CKEditor ckeCanvas;

	public CKEditorItem(String name) {
		super(name);
		ckeCanvas = new CKEditor(name);
		this.setCanvas(ckeCanvas);
	}

	@Override
	public void setWidth(String width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}

	@Override
	public void setWidth(int width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}

	@Override
	public void setHeight(String height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}

	@Override
	public void setHeight(int height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}

	@Override
	public Object getValue() {
		return getCKEditorValue(ckeCanvas.getID()+"_ta");
	}

	private native String getCKEditorValue(String ckEditorId)/*-{
		if($wnd.CKEDITOR.instances[ckEditorId]){
			return $wnd.CKEDITOR.instances[ckEditorId].getData();
		}
		return null;
	}-*/;

	@Override
	public void setValue(String value) {
		super.setValue(value);
		if(ckeCanvas.isLoaded())
			setCKEditorValue(ckeCanvas.getID()+"_ta", value);
		else
			ckeCanvas.setContents(value);
	}

	private native void setCKEditorValue(String ckEditorId,String value)/*-{
	if($wnd.CKEDITOR.instances[ckEditorId]){
		$wnd.CKEDITOR.instances[ckEditorId].setData(value);
	}
}-*/;
}

Fuentes:
CKEditor Integration
tinyMCE Integration
CKEditor Developers Guide

Anuncios

4 comentarios to “Integrando CKEditor en SmartGwt”

  1. jeason Says:

    Amigo una consulta,este editor es licenciado o lo puedo usar gratis?


  2. […] en nuestros proyectos utilizamos CKEditor como editor de texto. Aquí explico como integrarlo a […]


  3. […] en nuestros proyectos utilizamos CKEditor como editor de texto. Aquí explico como integrarlo a […]


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: