How To Use Summernote in Web Applications

Here is the index.php file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</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 href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<h1>Summernote</h1>
<form method="post">
  <div id="editor" name="editordata"></div>
  <button id="save-btn">Save</button>
</form>
<script>
$(document).ready(function() {
  $('#editor').summernote({
    height: 300
  });
  $('#save-btn').click(function() {
    var content = $('#editor').summernote('code');
    // Send data to server using AJAX
    $.ajax({
      url: 'save.php',
      type: 'POST',
      data: {content: content},
      success: function(response) {
        console.log(response);
      }
    });
  });
});
</script>
</body>
</html>

Here is the save.php File

<?php
$content = $_POST['content'];
$file = 'test.html';

if (file_put_contents($file, $content) !== false) {
  echo 'Content saved successfully.';
} else {
  echo 'Error: Unable to save content.';
}
?>

How To Use Summernote in Web Applications was last modified: February 26th, 2023 by Maximus Mccullough

Summary

Article Name

How To Use Summernote in Web Applications

Description

Summernote is a free and open-source WYSIWYG (What You See Is What You Get) editor for web applications. It allows users to create, edit, and format text and HTML content with ease. In this article, we will explore how to use Summernote and get the most out of its features.

Author

Maximus McCullough

Publisher

A1WEBSITEPRO LLC

Logo

Pages:Previous 1 2 3

Leave a Reply Cancel reply