Editor texto con jQuery y FontAwesome – RichText

Descarga : RichTextMini

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

<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">

2.- Cargando las referencias del plugin

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

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

<textarea class="content" name="example"></textarea>

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

<script>
 $(document).ready(function() {
 $('.content').richText();
 });
 </script>

5.- Configurar los botones del RichText.

$('.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: ''
  
});

Recuerda que si tienes dudas puedes comentar, recuerda compartir que eso nos motiva a continuar con el proyecto develoteca.com

Contenido relacionado: