Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – The text in ckeditor5 is not updated

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.

Tags:

2

Answers


  1. 0

    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. 0

    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