Editor de texto HTML WYSIWYG sencillo y muy ligero

Cuando necesito incorporar un editor de texto HTML suelo necesitar algo muy sencillo y ligero, y siempre acabo recurriendo a los más populares como el TinyMCE, que está muy bien, pero tiene demasiadas opciones para mis necesidades, y ocupa un poco más de los deseado.

En esta ocasión me han recomendado el TinyEditor, y creo que he dado en el clavo. Es un editor de los mas ligero (menos de 10 Kb), y con todas las opciones básicas que podemos necesitar.

editor

El único inconveniente, y que tiene facil solución, es que hay que hacer un pequeño “truqui” justo antes de enviar el formulario. Este “truqui” es para rellenar el textarea original con los datos del editor, ya que si no, el textarea viajaría vacío. Tenemos que hacer editorId.post() antes del envío

function tinyEditor () {
 var textarea = $('.tinyEditor');

if (textarea.size()) {
 textarea.each(function () {
 var editorWidth = $(this).outerWidth(true) * 100 / $(this).parent().outerWidth(true),
     editorId = 'editor'+$(this).attr('id');

editorId = new TINY.editor.edit(editorId, {
 id: $(this).attr('id'),
 cssclass: 'tinyeditor',
 controlclass: 'tinyeditor-control',
 rowclass: 'tinyeditor-header',
 dividerclass: 'tinyeditor-divider',
 controls: ['bold', 'italic', '|',
 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'unformat'
 ]
 });

$(this).parents('form').find('.bt').click(function () {
 editorId.post();
 });

// make component responsive
$(this).parents('.tinyeditor').width(editorWidth+'%')
                .find('iframe').width('100%');
 })
 }
 }

3 comentarios

  1. Rodrigo dice:

    Gracias por el tip

  2. Ranfe dice:

    Amigo, el truqui es todo completo como lo pones o solo es una seccion???
    Otra pregunta… en donde lo voy a colocar????

  3. yurleison dice:

    Hola amigo podrías explicar mejor lo del truco para enviar los datos

Escribe una comentario