Sumernote editar contenido con jQuery

Sumernote editar contenido con jQuery. Para editar el contenido de Summernote usando jQuery, puedes utilizar los métodos de la API de Summernote. Aquí tienes algunos ejemplos prácticos que podemos implementar en nuestros proyectos:

¿Que es Summernnote?

Summernote es un editor WYSIWYG fácil de configurar e integrar en nuestros proyectos. Además, es una biblioteca de JavaScript.

¿Para que sirve Summernote?

Sirve para formatear texto/contenido y enviarlo al servidor de base de datos, por ejemplo, para insertar/actualizar un registro. Sin embargo, también se usa para ampliar las funciones de una etiqueta <textarea>.

¿Cómo editar contenido MySQL usando editor Summernote con jQuery?

En este tutorial aprenderemos a extraer y/o editar contenido vía ajax MySQL a un editor tipo Summernote.

1. Obtener el contenido de Summernote

Para obtener el contenido actual del editor, usa el método summernote('code'):

var contenido = $('#summernote').summernote('code');
console.log(contenido);  // Muestra el contenido actual en la consola

2. Establecer o modificar el contenido

Para establecer un nuevo contenido en el editor Summernote, usa summernote('code', contenido):

var nuevoContenido ='<p>Este es un nuevo contenido</p>';
$('#summernote').summernote('code', nuevoContenido);

3. Inicializar Summernote

Es importante asegurarse de inicializar el editor correctamente:

$(document).ready(function() {
  $('#summernote').summernote({
    height: 300,  // Altura del editor
    minHeight: 200,  // Altura mínima
    maxHeight: 500,  // Altura máxima
    lang: 'es-ES',  // Cambiar idioma a español
    focus: true  // Enfocar el editor al iniciar
  });
});

4. Ejemplo con botón para cambiar contenido

Puedes cambiar el contenido al hacer clic en un botón:

<button id="cambiarContenido">Cambiar Contenido</button>
<textarea id="summernote"></textarea>

Código para inicializar el editor Summernote

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


  $('#cambiarContenido').click(function() {
    var nuevoContenido = '<p>Nuevo contenido insertado dinámicamente.</p>';
    $('#summernote').summernote('code', nuevoContenido);
  });
});

5. Guardar el contenido con AJAX

Si quieres enviar el contenido del editor a un servidor, puedes usar AJAX:

$('#guardarContenido').click(function() {
  var contenido = $('#summernote').summernote('code');

  $.ajax({
    url: 'guardar.php',  // Ruta a tu script en el servidor
    method: 'POST',
    data: { contenido: contenido },
    success: function(respuesta) {
      alert('Contenido guardado correctamente.');
    },
    error: function(error) {
      alert('Error al guardar el contenido.');
    }
  });
});

Asegúrate de reemplazar guardar.php con la ruta correcta de tu backend.

6. Eliminar todo el contenido

Si deseas limpiar el editor, usa:

$('#summernote').summernote('reset');

Con estos ejemplos, puedes editar, modificar y guardar contenido en Summernote usando jQuery.