jQuery toggleClass example

Toggle class name on click in jQuery

by Simon Price

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summernote Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Summernote CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <div id="summernote">Hello, Summernote!</div>
     <button type="submit" class="btn btn-primary">Submit</button>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<!-- Summernote JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            toolbar: [
                // Define the toolbar: text formatting, lists, paragraphs, height (line spacing)
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                // Note: 'picture' and 'video' buttons are excluded to remove file upload and video options
            ],
            placeholder: 'Start typing here...',
            tabsize: 2,
            height: 200
        });
        
         // Update hidden input field value before form submission
        $('.btn').on('click', function(e) {
            e.preventDefault(); // Prevent actual form submission
            var content = $('#summernote').summernote('code');
           alert(content)
            
            // For demonstration: log...

JavaScript

ADA