Uno de mis últimos proyectos es una app de notas para alojarlas en mi servidor y prescindir de [G] Notes.
La característica más interesante que incluye es Rich Text Editor, una completa librería javascript en forma de interfaz para dar formato HTML al texto de cualquier formulario web.
Es de código abierto, gratis para uso personal, y muy simple de usar. Todo un win-win que te traigo hoy.
Licencia
He dicho que Rich Text Editor es gratis, y es así si le das un uso no comercial.
Es importante que leas su página de precios para que entiendas las limitaciones de la licencia gratuita:
- 1 desarrollador
- 1 dominio
- 5 usuarios activos
En mi caso, he instalado Rich Text Editor en este servidor que aloja el blog, y lo he restringido mediante php para que solo se pueda acceder desde el propio dominio.
TIP! No hospedes los archivos en cualquier sitio que sea accesible por cualquiera (como un servidor público), ya que podrías dar pie a un incumplimiento de licencia, teniendo que pagar una licencia standard, o dando de baja tu app.
Aun así, las licencias comerciales son de un único pago y puede que te merezca la pena obtener una si vas a darle más uso.
Instalación
Usar Rich Text Editor es muy sencillo, y su página de documentación lo explica a la perfección.
Para instalar Rich Text Editor solo tenemos que descargar los ficheros de su página web a una carpeta local o a una ubicación de tu servidor.
https://richtexteditor.com/download.aspx
Habilitar interfaz
Rich Text Editor funciona dentro de un documento HTML.
Para habilitarlo:
- Como siempre, creamos un fichero HTML con su estructura básica.
- Enlazamos los scripts y el CSS en el
<head>:<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script> - Dentro del
<body>añadimos el siguiente<div>:<div id="div_editor1" >
<p>Initial Document Content</p>
</div> - Por último, llamamos al editor en el
<script>:var editor1 = new RichTextEditor("#div_editor1", {skin:"rounded-corner", toolbar:"full"});
Todo lo anterior se vería así (puedes interactuar con él):
Y aquí el código completo:
<html>
<head>
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script
</head>
<body>
<div id="div_editor1" >
<p>Initial Document Content</p>
</div>
</body>
<script>
var editor1 = new RichTextEditor("#div_editor1", {skin:"rounded-corner", toolbar:"full"});
</script>
</html>TIP! Copia y pega el código anterior en un fichero .html, dentro de la carpeta de richtexteditor, y podrás ver este ejemplo en tu navegador.
Configuración
Como verás, he añadido algunas propiedades a la hora de llamar al editor:
{skin:"rounded-corner", toolbar:"full"}
Hay múltiples opciones de configuración que puedes consultar aquí:
https://richtexteditor.com/docs/configuration-reference.aspx
Funciones del editor
La librería contiene múltiples funciones en forma de API para interactuar con el editor. Todos los comandos que se pueden usar se encuentran aquí:
https://richtexteditor.com/docs/cmd_allcommands.aspx
Una funcionalidad básica es capturar el texto que hemos ido editando en el cuadro de texto. Es lo que hace el botón de la parte inferior, usando la función getHTMLcode():
<button onclick="alert(editor1.getHTMLCode())">Show Html Code</button>
Usos
Como comenté anteriormente, el uso que le voy a dar a esta librería es en un editor de notas que se alojará en mi servidor.
El editor de texto me sirve para dar formato a las notas muy fácilmente y guardarlas con todo el formato.
Aquí tienes una demo de cómo va quedando la interfaz, aunque no tiene las funciones habilitadas todavía.
Otras aplicaciones en las que puedes usar este editor es en foros, formularios, o cualquier cuadro de texto que tenga que rellenar un usuario de tu web app.
Espero que te resulte tan útil como a mí y que le des buen uso. Si tienes dudas o comentarios puedes enviarlos por Twitter 🐦 Hasta pronto!
