Get it on Google Play

Como hacer uso de Alloy Editor dentro de tus portlets Liferay 7.2

09-08-2019
Alloy Editor

Alloy Editor

Alloy Editor es el nuevo editor de Liferay y si queremos que nuestros desarrollos queden integrados dentro del portal, pues deberemos usarlo.

Incrustar Alloy Editor en tus portlets

Para incrustar Alloy Editor dentro de un portlet podemos hacerlo usando la librería de tags liferay-ui de la siguiente manera:

<liferay-ui:input-editor
        	contents=""
	cssClass="my-alloy-editor"
	editorName="alloyeditor"
	name="editor"
	placeholder="Descripción"
	showSource="true" 
	/>

Si usamos este método podemos usar los atributos que implementaremos como funciones Javascript: ‘initMethod’ donde pondremos la función que devuelve el contenido o ‘onBlurMethod’, ‘onChangeMethod’ o ‘onFocusMethod’ para implementar estos eventos.

La alternativa es crear el editor usando Javascript:

<div id='miEditor'></div>

<script>
AlloyEditor.editable('miEditor');
</script>

Interactuar vía Javascript con Alloy Editor

Hasta aquí es fácil, el problema es cuando quieres interactuar con el editor, sobretodo cuando trabajas con Frameworks tipo VueJS(Como es mi caso). Para poder acceder al objeto del editor lo haremos vía Javascript de esta manera:

/* Para obtener el contenido */
window["miEditor"].getHTML();

/* Para cargar el contenido */
window["miEditor"].setHTML("<b>Hello world</b>");

Tened en cuenta que el portal cargará vuestro Javascript ant4es que el editor, por lo tanto, tendréis que esperar a que el editor esté disponible:

function loadContents() {

	if ( !window["miEditor"] ) {
		setTimeout( "loadContents()", 1000 );
		return;
		}
		
	window["miEditor"].setHTML( "Mi contenido" );
	}

Y aquí señores, es donde los grandes desarrolladores marcan la diferencia 😀 Buen fin de semana.

Actualización

Gracias a Chema Balsas por explicar que tenemos otra manera de acceder al objeto, mucho mas elegante. Desde la versión 7.1 de Liferay que podemos hacerlo de la siguiente manera:

Liferay.componentReady('miEditor').then(editor => {

    editor.setHTML("<b>Hello World</b>");

    });

Así que muchas gracias Chema Balsas por ayudar a mejorar este blog y hasta la próxima.

Si te ha servido, por favor comparte

Interesado en formación Liferay?

 

Leave a Reply