Componente HTML Bootstrap WYSIWYG Live Editor

En muchas ocasiones queremos poner en nuestra web un formulario de recogida de datos donde tenemos un textarea, y queremos que el usuario tenga la posibilidad de escribir contenido dando formato HMTL, el Bootstrap WYSIWYG  Live Editor, es un editor WYSIWYG creado Bootstrap que de una manera muy sencilla nos da todas las funcionalidades de un editor.

Sin duda, Bootstrap nos hace la vida más fácil a los desarrolladores, jiji.

👉 Especificaciones

  • Categoría: WYSIWYG Editor
  • Requisitos: jQuery, Bootstrap
  • Licencia: MIT License.
  • Empresa: SummerNote. [Summernote Web]

bootstrap wyxisyg bootstrap-live-editor

👉¿Qué conseguirás con el Editor?

  • Facilidad de instalación, es muy simple, tienes que descargar las librerías y ya están para ser usadas directamente.
  • Puedes modificar de una manera fácil el estilo.
  • Tienes ejemplos para su uso.
  • Es un editor Open Source por lo que podrás usarlo para lo que quieras y está mantenido en el tiempo por la comunidad.
  • Tiene muy buena integración con Angular, Rails, Django, jQuery…

👉Descargar Componente

A continuación os pego de donde podéis bajaros el componente. Obtendréis todo lo que necesitáis para comenzar a trabajar con este componente tan sencillo y a la vez tan completo. Super Simple WYSIWYG Editor on Bootstrap

WYSIWYG EDITOR – descargar

 

Uso del Bootstrap WYSIWYG EDITOR

1. Requiere HTML5 doctype.

<!DOCTYPE html>
<html lang="en">
...
</html>

2. Debemos de incluir js/css, en el zip ya os paso los documentos de summernote, con lo que podríais poner el link a los documentos en local.

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>

3. En la zona de JavaScript, instanciar el componente.

$(document).ready(function() {
    $('#summernote').summernote();
});

👉 Os paso el documento completo de ejemplo

<!DOCTYPE html>
<html lang="en">
<title>Summernote</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Editor!</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>

👉Funcionalidades Básicas: Bootstrap WYSIWYG EDITOR

$('#summernote').summernote({
  height: 300,                 // configurar la altura del textarea
  minHeight: null,             // configurando la altura mínima
  maxHeight: null,             // configurando la altura máxima
  focus: true                  // poniendo el foco
});

👉Funcionalidades Avanzadas del Editor Bootstrap WYSIWYG

En algunas ocasiones no queremos que se puedan hacer cambios en estilos de letra por ejemplo, en fuentes, etc. pues bien, es muy fácil, el componente permite de forma fácil decirle qué herramientas quieres que se muestren, en este caso he puesto sólo: la negrita, cursiva, poder subrayar, tamaño de fuente, color de fuente, las listas, alineación de párrafo, tamaño de interlineado.

$('#summernote').summernote({
  height:200,
  minHeight: null,
  maxHeight: null,
  toolbar: [
     ['toolbar', ['bold', 'italic', 'underline','fontsize','color','ul', 'ol', 'paragraph']]
  ]				
});

👉 Ejemplo funcionando todo esto que te he explicado Bootstrap WYSIWYG

Ejemplo funcionando Bootstrap Live Editor

¿No has comprendido algo del manual?

Te ayudo

Mónica
¿Me sigues?

2 comentarios en «Componente HTML Bootstrap WYSIWYG Live Editor»

  1. ¡Hola!, estoy buscando un editor en donde pueda usar el de un formulario HTML como editor WYSIWYG pero con la funcionalidad de insertar un sistema de contenedores, filas y columnas tipo Bootstrap; algo como lo que hace un Page Builder tipo SiteOrigins de WordPress pero obviamente, para proyectos que HTML. Si conoces alguno, te lo agradeceré infinitamente.

    Responder

Deja un comentario

Responsable: Mónica Saavedra.

Finalidad de la recogida y tratamiento de los datos personales: Gestionar el comentario que me realizas.

Legitimización: Consentimiento del interesado.

Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected], así como el derecho a presentar una reclamación antes una autoridad de control.

Destinatarios: Este formulario me enviará un correo y se guardará tu comentario en el WordPress en el hosting de Raiola Networks. No cederé tus datos en ningún caso.

Información de política: Puedes consultar información adicional sobre mi tratamiento de datos en política de privacidad.