'Suneditor insertHTML

I'm trying to use the function: insertHTML

As per manual: editor.insertHTML('TEXTO DE TESTE', true, true);

I created a button and put a jquery

suneditor.insertHTML('Text 1', true, true);

But when clicking the button it does not add the text. But if I click on the editor and then click on the button, the text is added.

What am I doing wrong?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
<link href="http://suneditor.com/dist/css/suneditor.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<button id="text1">Text 1</button>
<button id="text2">Text 2</button>
<button id="text3">Text 3</button>



<textarea id="exampleOptions" style="width:100%; height:200px;">
Teste de Editor
</textarea>

<script src="http://suneditor.com/sample/js/common.js"></script>
<script src="http://suneditor.com/dist/suneditor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/css/css.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
<script>
$(document).ready(function(){

    $("#text1").click( function(){
        suneditor.insertHTML('Text 1', true, true);
    }); 
    $("#text2").click( function(){
        suneditor.insertHTML('Text 3', true, true);
    }); 
    $("#text3").click( function(){
        suneditor.insertHTML('Text 2', true, true);
    }); 

    suneditor = SUNEDITOR.create('exampleOptions',{
        font : [
            'Arial',
            'tahoma',
            'Courier New,Courier'
        ],
        fontSize : [
            8, 10, 14, 18, 24, 36
        ],
        colorList: [
            ['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'],
            ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']
        ],
        paragraphStyles: [
            'spaced',
            'neon',
            {
                name: 'Custom',
                class: '__se__customClass'
            }
        ],
        textStyles: [
            'translucent',
            {
                name: 'Emphasis',
                style: '-webkit-text-emphasis: filled;',
                tag: 'span'
            }
        ],
        width: '100%',
        maxWidth: '600px',
        minWidth: 400,
        height : 'auto',
        videoWidth : '80%',
        youtubeQuery : 'autoplay=1&mute=1&enablejsapi=1',
        imageWidth : 150,
        popupDisplay: 'local',
        resizingBar: false,
        buttonList : [
            [
javascripthtmljquerycsssuneditor


Solution 1:[1]

I believe that insertHTML is working with the last cursor position. So if you don't focus the editor, last position of cursor is undefined and insertHTML will not work until you focus the editor. By the way i believe there is focus method that you can focus the editor then use insertHTML method. Documentation

Solution 2:[2]

editor.focus();
editor.insertHTML("...");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ali Bayat Mokhtari
Solution 2 JiHong.Lee

Related Questions