Componente html Bootstrap 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 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]

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.

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

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']]
  ]				
});

Ejemplos

Ejemplo funcionando

2 comentarios en “Componente html Bootstrap 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

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros para recopilar información estadística sobre tu navegación. Si continuas navegando, consideramos que aceptas el uso de cookies. política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies