Вывод содержимого редактора Froala

Question

Почему не работает $('div#example').froalaEditor('html.get'). Я пытаюсь вывести данные из эдитора, но безуспешно, выводит пустую переменную в alert. в консоль также

    <div id="example" name="example" style="font-size: 18px; margin-top: 24px"></div>

        <button type="button" id="submitButton" class="read-main">
            <div class="read-text">
                Написать<br>отзыв
            </div>
        </button>

    <script>
            var editor = new FroalaEditor('#example',
                {
                    heightMin: 500,
                    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'paragraphFormat', '|', 'align', 'formatOL', 'formatUL', 'quote', 'insertHR', '|', 'insertLink', 'insertImage', 'insertVideo', '|', 'undo', 'redo'],
                })
 

        $("#submitButton").click(function () {
            var html = $('div#example').froalaEditor('html.get');
            alert(html);
        })
    </script>

Answer 1

библиотеки jQuery и Froala надо загружать до инициализации редактора.

создать экземпляр редактора Froala лучше с помощью new FroalaEditor и сохранить затем его к примеру в переменную editorInstance.

Вместо использования jQuery метода $('div#example').froalaEditor('html.get'), используйте метод экземпляра editorInstance.html.get().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Froala Editor Example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.1/css/froala_editor.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.1/js/froala_editor.min.js"></script>
</head>
<body>

<div id="example" name="example" style="font-size: 18px; margin-top: 24px"></div>

<button type="button" id="submitButton" class="read-main">
    <div class="read-text">
        Написать<br>отзыв
    </div>
</button>

<script>
    $(document).ready(function () {
        var editorInstance = new FroalaEditor('#example', {
            heightMin: 500,
            toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'paragraphFormat', '|', 'align', 'formatOL', 'formatUL', 'quote', 'insertHR', '|', 'insertLink', 'insertImage', 'insertVideo', '|', 'undo', 'redo'],
        });

        $("#submitButton").click(function () {
            var html = editorInstance.html.get();
            alert(html);
        });
    });
</script>

</body>
</html>

БЛОГ НА HUSL

Вывод содержимого редактора Froala

Ответы (1 шт):