Editor texto con jQuery y FontAwesome – RichText


Editor texto con jQuery y FontAwesome – RichText, algo que puedes implementar con tu proyecto web.

Preview: https://oscaruhp.github.io/RichTextMini/ 

Si estas implementando un proyecto donde el usuario redacta información, puedes usar este plugin para hacer más amigable la caja de texto donde el usuario ingresa información.

 

Puedes implementar este plugin en todos los proyectos web con cualquier tecnología que use jQuery, para implementarlo tienes que seguir los siguientes pasos:

1.- Crear las referencias a los documentos css y js

[html]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
[/html]

2.- Cargando las referencias del plugin

[html]
<link rel="stylesheet" href="css/richtext.min.css">
<script src="js/jquery.richtext.js"></script>
[/html]

3.- Crear el textarea que se transformará en RichText.

[html]
<textarea class="content" name="example"></textarea>
[/html]

4.- Ejecutar el script que convierte el textarea en RichText.

[html]
<script>
$(document).ready(function() {
$(‘.content’).richText();
});
</script>
[/html]

5.- Configurar los botones del RichText.

[javascript]
$(‘.content’).richText({

// text formatting
bold: true,
italic: true,
underline: true,

// text alignment
leftAlign: true,
centerAlign: true,
rightAlign: true,

// lists
ol: true,
ul: true,

// title
heading: true,

// colors
fontColor: true,

// uploads
imageUpload: true,
fileUpload: true,

// link
urls: true,

// tables
table: true,

// code
removeStyles: true,
code: true,

// colors
colors: [],

// dropdowns
fileHTML: ”,
imageHTML: ”

});
[/javascript]

Recuerda que si tienes dudas puedes comentar, recuerda compartir que eso nos motiva a continuar con el proyecto develoteca.com
[adjuntos descripcion=”RichTextMini” link=”github.com/oscaruhp/RichTextMini/archive/master.zip”]