Markitup! convierte tu textarea en un editor html con jQuery

markItUp! es un plugin Javascript basado en la librería jQuery que nos permite agregar a un textarea funciones de un editor de estilo.

Este plugin cuenta con las ventajas de ser liviano, fácil de personalizar y flexible para las necesidades de un desarrollador para que pueda incluirlo tanto como en CMS, Blogs, Foros o Páginas web.

Instalación

1. Incluimos la librería jQuery y los archivos del plugin en nuestro trabajo:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

2. Cargamos el CSS de markItUp!

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />

Para ahorrar carga de la página se podría incluir el código que se encuentra dentro de esos archivos en el CSS del tema.

3-a. Especificamos en que textarea estará nuestro editor

<script type="text/javascript" >
   $(document).ready(function() {
      $("#markItUp").markItUp(mySettings);
   });
</script>
...
<textarea id="markItUp"></textarea>

3-b. Si queremos que el editor aparezca en todos los textarea, lo escribimos de esta manera

<script type="text/javascript" >
   $(document).ready(function() {
      $("textarea").markItUp(mySettings);
   });
</script>
...
<textarea></textarea>

4. El paquete solamente trae el editor predeterminado, si queremos un editor html “completo”, bbcode, estilo wiki, etc deberemos bajar el JSON aparte.

Ejemplo:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/bbcode/set.js"></script>

<script language="javascript">
$(document).ready(function()	{
    $('#bbcode').markItUp(myBbcodeSettings);

    $('#emoticons a').click(function() {
        emoticon = $(this).attr("title");
        $.markItUp( { replaceWith:emoticon } );
    });
});
</script>

Capturas

Descargas

markItUp! 1.1.12 - Demo

Html

BBCode