En este artículo, conoceremos el editor de Summernote y su uso y comprenderemos su implementación a través del ejemplo. El Summernote Editor es un editor WYSIWYG súper simple gratuito y de código abierto basado en Bootstrap y jQuery. Es una biblioteca de JavaScript que puede ser útil para construir los editores WYSIWYG en línea. Se mantiene bajo licencia MIT por una gran comunidad. Es fácil de usar y contiene muchas opciones personalizables. Se puede implementar fácilmente en cualquier marco como React, Django, Angular, etc.
Características:
- Editor ligero de texto enriquecido
- Fácil instalación
- Fácil integración con cualquier marco
- Interfaz de usuario sencilla
- Mucha personalización disponible.
- Gratis y de código abierto
- Edición WYSIWYG interactiva
Hay 2 formas de usar el Editor Summernote en nuestra página web:
- Usando las versiones precompiladas y minimizadas descargadas de archivos CSS y JavaScript de su sitio oficial .
- Usando los enlaces CDN disponibles para summernote CSS & js, jQuery y Bootstrap.
Podemos usar cualquiera de los métodos para construir el sitio estático con el editor de texto y el contenido.
Acercarse:
- Primero, descargue la versión precompilada minificada de Summernote del sitio web oficial.
- Extráigalo y colóquelo en la carpeta de trabajo actual.
- Cree un archivo index.html y declare los enlaces Bootstrap y jQuery dentro de la etiqueta <head>.
- Después de completar estos pasos, la estructura del proyecto se verá como la siguiente imagen.
Importar la nota de verano:
- Primero, importemos Bootstrap desde CDN en el archivo index.html. Todos los siguientes códigos deben colocarse dentro de las etiquetas de encabezado.
<!– Incluir bibliotecas (jQuery, bootstrap) –>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css” rel=”stylesheet”/>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js /bootstrap.min.js”></script>
- A continuación, importe los archivos CSS y JS de summernote.
<enlace href=”/src/summernote-0.8.18-dist/summernote-bs4.min.css” rel=”hoja de estilo”/>
<script src=”/src/summernote-0.8.18-dist/summernote-bs4 .min.js”></script>
- Ahora, en la etiqueta <body>, inicialice el editor de notas de verano.
<div id=”mieditor”></div>
<script>
$(document).ready(function() {
$("#myeditor").summernote({
placeholder: "Write your content here",
height: 200,
});
});
</script>
Ahora, nuestro editor de texto se ha inicializado.
Ejemplo : Este ejemplo ilustra el uso de Summernote Editor para construir y facilitar el editor en las páginas web.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks Editor</title>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<link rel="stylesheet"
href="/src/summernote-0.8.18-dist/summernote-bs4.min.css" />
<script src="/src/summernote-0.8.18-dist/summernote-bs4.min.js"></script>
<link rel="stylesheet"
href="/src/summernote-0.8.18-dist/summernote.css" />
<script src="/src/summernote-0.8.18-dist/summernote.js"></script>
</head>
<body>
<h1>GeeksforGeeks Editor</h1>
<div id="myeditor"></div>
<button type="button"
class="btn btn-success"
onclick="showContent()"> Show
</button>
<div id="myContent" class="container"></div>
<script>
$(document).ready(function() {
$("#myeditor").summernote({
placeholder: "Write your content here",
height: 200,
});
});
function showContent() {
document.getElementById("myContent").innerHTML =
$("#myeditor").summernote("code");
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Firefox
- Borde de Microsoft
- explorador de Internet
- Ópera
- Safari
Referencia: https://summernote.org/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA