如何根据按钮单击禁用/启用 froala 编辑器

问题描述 投票:0回答:1

我的应用程序中有一个 froala 编辑器,我试图通过单击按钮来禁用/启用它。知道如何做到这一点吗?

我尝试设置 contenteditable=false 但单击编辑器后它变得可编辑。似乎什么都不起作用。有没有我可以订阅并将其设置为禁用的活动?

angular froala
1个回答
0
投票
<!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>
© www.soinside.com 2019 - 2024. All rights reserved.