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.

Abrir chat