skip to Main Content

Excuse me, my English is bad.

There is such a code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" />

<body>
    <div id="addtext">button</div>
    <div id="inform">
        <div class="editor">
            <p>Hello from CKEditor 5!</p>
        </div>
    </div>
</body>

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/"
        }
    }
</script>

<script type="module">

    import {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } from 'ckeditor5';


    // При загрузки страницы
    ClassicEditor
        .create(document.querySelector('.editor'), {
            plugins: [Essentials, Bold, Italic, Font, Paragraph],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic',
            ]
        })
        .then( /* ... */)
        .catch( /* ... */);

    $("#addtext").on("click", function () {
        var a = $('.editor').html();
        alert (a);
    })

</script>

I change the text in the ckeditor5 form and click addtext, as a result, I get the old text in the alert anyway. How do I get a new text in the ckeditor5 form?

enter image description here

I need the text to change dynamically.

2

Answers


  1. Just use the CKEditor API editor.getData()

        let editor;
    
        ClassicEditor
            .create(document.querySelector('.editor'), {
                plugins: [Essentials, Bold, Italic, Font, Paragraph],
                toolbar: [
                    'undo', 'redo', '|', 'bold', 'italic',
                ]
            })
            .then(newEditor => { editor = newEditor; })
            .catch( /* ... */);
    
        $("#addtext").on("click", function () {
            var a = editor.getData();
            alert (a);
        })
    
    Login or Signup to reply.
  2. You just have to call the updated instance

    $("#addtext").on("click", function () {
            // Get the updated data from the editor
            const updatedText = editorInstance.getData();
            alert(updatedText);
        });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search