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.
Indice de contenidos de esta entrada
👉 Especificaciones
- Categoría: WYSIWYG Editor
- Requisitos: jQuery, Bootstrap
- Licencia: MIT License.
- Empresa: SummerNote. [Summernote Web]
👉¿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.
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
- ¿Cómo optimizar el contenido para el ranking de búsqueda? - noviembre 29, 2022
- Glosario de términos de marketing - mayo 22, 2022
- Actualizaciones de WordPress - abril 24, 2022
¡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.
Buenas Carlos, perdona por no contestar antes, te comento en esta url tienes algunos: https://1stwebdesigner.com/best-wysiwyg-html-editor/ yo tengo trabajado con el CKEditor, que te permite unas cuantas funcionalidades que no tienen los demás como tablas, gráficos… en esa url tienes las demos de cada uno. Espero haberte ayudado. Y por supuesto, el que recomiendo en este post, sin duda alguna te servirá y te será muy fácil instalarlo siguiendo la entrada. Un saludo.