
Una de las cosas más importantes en los CMS actuales son los editores wysiwyg, que posibilitan la creación de contenidos sin tener que aprender el lenguaje de marcado html.
Joomla viene con el editor tinyMCE por defecto, aunque permite instalar más editores de terceros.
Vamos a ver cómo usar estos editores en nuestros componentes personalizados, para poder crear aplicaciones que generen contenido en formato html sin la necesidad de conocer este Gracias al api de Joomla, usar este editor en nuestros componentes se hace muy sencillo, para esto han implementado una clase llamada JEditor, la cual tiene todas las propiedades y metodos necesarios pasa interactuar con el editor.
El objeto de la clase JEditor lo obtendremos mediante el método estático getEditor() del objeto JFactory , el cual devuelve una instancia del editor que tiene el usuario actual asignado. El método getEditor devolvera el tipo de editor que este asignado en el backend de Joomla!, por defecto es tinyMCE, aunque existen otros, algunos muy buenos…
Vamos a ver el código necesario…
<form action="index.php" method="post"> <?php $editor =& JFactory::getEditor(); echo $editor->display('nombreTextarea', 'contenido del TextArea', '100%','400','100','6'); ?> <input name="option" value="com_tuComponente" type="hidden" /> <input name="task" value="guardar" type="hidden" /> </form>
Pon este código en la vista de tu componente e imprimirá el editor.
El codigo html generado se almacena en un textare con nombre “nombreTextarea”.
En el task guardar puedes hacer lo que quieras con el contenido del textarea, lo más comun almacenarlo en una base de datos.
Vamos a ver los parámetros del método display del objeto JEditor:
display (string $name, string $html, string $width, string $height, int $col, int $row, [boolean $buttons = true], [array $params = array()])
- string $name: nombre del textarea
- string $html: contenido del text area
- string $width: anchura del textarea (px or %)
- int $col: numero de columnas del textarea
- int $row: numero de filas del textarea
- boolean $buttons: si es verdadero los botones del editor se mostrarán
- array $params: array asociativo con los parametros del editor
Sencillo , eh?
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página
5 de Diciembre del 2008 a las 6:16 pm
Sabes como achicar el editor tinyMCE, es edir que se un cuarto de página. (no han funcionado tablas ni div)
12 de Diciembre del 2008 a las 2:03 am
Perdido: Yo lo tengo puesto dentro de un con un 100% al igual que ha puesto david y me lo respeta, eso si, ha de tener un mínimo (unos 600px creo que es), que es el ancho de los botones superiores, si te fijas, al ponerle menos ancho que eso, te dejará el contorno con ese mínimo y te achicará sólo el contenido donde escribes.
Yo tengo otro problema… y es que al grabar el texto no me graba las modificaciones html que hago, lo graba todo como texto plano, he probado con un campo TEXT en mi base de datos, y MEDIUMTEXT también, siguiendo el formato que he visto en jos_content, pero nada.
¿Sabes de que puede ser david?
Muchas gracias por tu tiempo compartido!
12 de Diciembre del 2008 a las 2:23 am
Ya lo he solucionado, por si alguien le pasa, gracias a este post: http://www.joomlaspanish.org/foros/showthread.php?t=28548&highlight=JFactory%3A%3AgetEditor() me hice una idea de mi problema que era muy similar.
Yo recojo los datos del formulario en un:
JRequest::get( ‘post’ )
pero claro, por defecto ese método elimina los tags html, por eso, lo cambié por:
JRequest::get( ‘post’,JREQUEST_ALLOWHTML)
y todo estupendo,
Saludos!
15 de Diciembre del 2008 a las 11:56 pm
Cierto hidabe, se me pasó ese detalle.
la clase JRequest tiene un monton de utlidades interesantes.
Para que no limpie os tags html se ha de usar JRequest de la siguiente forma:
JRequest::getVar( ‘nombre_del_textarea’, ‘none’, ‘POST’, ‘STRING’, JREQUEST_ALLOWHTML );
Donde JREQUEST_ALLOWHTML indica que no limpie los tags html.
Muchas gracias por el aporte!
Saludos
25 de Febrero del 2009 a las 9:19 am
Gracias a los dos!!, David y hidabe. Tenia precisamente ese mismo problema en un componente de viajes que estoy creando.
También me vino de perlas el Post que enviaste ayer para insertar calendarios. Magnífico!!!
Muchas Gracias, espero en unos meses aprender más sobre la API de Joomla y contribuir con aportes tan buenos como los que posteáis vosotros.
3 de Septiembre del 2009 a las 2:57 pm
Gracias por el aporte, yo tenía el mismo problema con los tags html, gracias!!
18 de Noviembre del 2009 a las 1:43 pm
Tengo un problema cuando inserto una imagen desde el editorTinyMCE.
//Utilizo el JRequest de la siguiente manera:
$mensaje=JRequest::getVar( ‘message’, ‘none’, ‘POST’, ‘STRING’, JREQUEST_ALLOWHTML );
//y lo inserto en la bd
$insertFields = “INSERT INTO #__editor” .
“(message, created_by, location, userip) ” .
“VALUES (” . $mensaje. “,” . intval($uid) . “,” .
$fldLocation . “,” . $userIp . “);”;
No me inserta la consulta.
Cuando hago un echo de la consulta la imagen no aparece como código html, me aparece el hueco de la foto sin la foto.
Alguién me puede ayudar?
19 de Noviembre del 2009 a las 4:09 pm
Después de investigar por todos los lados y hacer pruebas,todos los ejemplos eran para guardar el texto del editor en un componente del front-end, pero al final después de pruebas y más pruebas pude guardarlo en un componente en el Back-end. Ahí va el código que emplee para poder guardar el texto en formato html:
function save()
{
JRequest::checkToken() or jexit( ‘Invalid Token’ );
$this->setRedirect( ‘index.php?option=tu_componente’ );
$db =& JFactory::getDBO();
$table =& JTable::getInstance(‘tu_tabla’, ‘Table’);
if (!$table->bind( JRequest::get( ‘post’, JREQUEST_ALLOWRAW ) )) {
return JError::raiseWarning( 500, $table->getError() );
}
if (!$table->check()) {
return JError::raiseWarning( 500, $table->getError() );
}
if (!$table->store()) {
return JError::raiseWarning( 500, $table->getError() );
}
$table->checkin();
switch (JRequest::getCmd( ‘task’ ))
{
case ‘apply’:
$this->setRedirect( ‘index.php?option=tu_componente&task=edit&idc[]=’. $table->idc );
break;
}
$this->setMessage( JText::_( ‘Item Saved’ ) );
}
Añadiendo “JREQUEST_ALLOWRAW ” en la linea:
if (!$table->bind( JRequest::get( ‘post’, JREQUEST_ALLOWRAW ) ))
y a funcionar, por fin, lo pongo aquí por si alguien tiene el mismo problema.
Saludos