Insert at Cursor in CKEditor

Post Views: 4,832

Hello Friends, today I am going to share very small code which is how to insert at cursor in CKEditor. We can insert both html and plain text but here we’re going to see inserting html but if we want to insert text then we just need to call insertText function instead of insertHtml.

So Here is the code,

ckeditor-insert-at-cursor.html

<!DOCTYPE html>
<html>
    <head>
        <title>Insert at Cursor in CKEditor</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <textarea id="content"></textarea>
        <input id="data" type="text"/>
        <input id="insert" type="button" value="Insert at Cursor"/>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
        <script>
            CKEDITOR.replace('content');

            function insertContent(html) {
                for (var i in CKEDITOR.instances) {
                    CKEDITOR.instances[i].insertHtml(html);
                }
                return true;
            }

            $("#insert").click(function () {
                insertContent($("#data").val())
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Insert at Cursor in CKEditor</title>

</head>

<body>

CKEDITOR.replace('content');

function insertContent(html) {

for (var i in CKEDITOR.instances) {

CKEDITOR.instances[i].insertHtml(html);

}

return true;

}

$("#insert").click(function () {

insertContent($("#data").val())

});

</script>

</body>

</html>

Output

Demo

Click Here for Demo

Thank you Friends
Please don’t forget share if you like it

Insert at Cursor in CKEditor

ckeditor-insert-at-cursor.html

Output

Demo

Comments

Leave a Reply Cancel reply