How to disable/enable froala editor based on button click

595 Views Asked by At

I have a froala editor in my application and I'm trying to disable/enable it based on a button click. Any idea how to do this?

I tried setting contenteditable=false but on clicking the editor it becomes editable. Nothing seems to be working. Is there any event that i can subscribebe to and set it disabled?

1

There are 1 best solutions below

0
Muhayminul96 On
<!DOCTYPE html>
<html>
<head>
    <!-- Include Froala Editor stylesheets and scripts here -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/css/froala_style.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/js/froala_editor.pkgd.min.js"></script>
</head>
<body>
    <!-- Your Froala Editor textarea -->
    <textarea id="editor"></textarea>

    <!-- Button to toggle editor -->
    <button id="toggleEditorBtn">Toggle Editor</button>

    <script>
        // Initialize Froala Editor
        var editor = new FroalaEditor('#editor');

        // Function to disable editor
        function disableEditor() {
            editor.edit.off(); // Turn off editing
            editor.toolbar.disable(); // Disable the toolbar
        }

        // Function to enable editor
        function enableEditor() {
            editor.edit.on(); // Turn on editing
            editor.toolbar.enable(); // Enable the toolbar
        }

        // Event handler for the button click
        document.getElementById('toggleEditorBtn').addEventListener('click', function() {
            if (editor.edit.isDisabled()) {
                enableEditor();
            } else {
                disableEditor();
            }
        });
    </script>
</body>
</html>