Как вставить элементы в ckeditor, которые я получаю от API

Question

Я пытаюсь вставить синонимы слова в текстовую область Ckeditor , которую я получаю из API.Я могу получить и увидеть данные в консоли, но не могу опубликовать их в редакторе.Я использую функцию onOk.Пожалуйста, помогите мне в этом:

код моего lookup_synonyms.js:

CKEDITOR.dialog.add( 'lookup_synonymsDialog', function( editor ) {
return {
    title: 'Find synonyms',
    minWidth: 400,
    minHeight: 100,
    contents: [
        {
            id: 'tab-basic',
            label: 'Input a word to find synonym',
            elements: [
                {
                    type: 'text',
                    id: 'abbr',
                    label: 'Input word',
                    validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
                }
            ]
        },
        {
            id: 'tab-adv',
            label: 'Advanced Settings',
            elements: [
                {
                    type: 'text',
                    id: 'id',
                    label: 'Id'
                }
            ]
        }
    ],
    onOk: function() {
        var dialog = this;

        var abbr = editor.document.createElement( 'abbr' );
        //abbr.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
        const newobj = abbr.setText( dialog.getValueOf( 'tab-basic', 'abbr' ) );



        var x = dialog.getValueOf( 'tab-basic', 'abbr' );
        fetch("https://api.datamuse.com/words?ml=" + x)
        .then((resp) => resp.json())
        .then (data =>
        {
        const obj = JSON.stringify(data);   
        const wordArr = data.map(obj => obj.word);
        console.log(wordArr);
         //document.getElementById("id").innerHTML = wordArr;
        })


        var id = dialog.getValueOf( 'tab-adv', 'id' );
        if ( id )
            abbr.setAttribute( 'id', id );

        editor.insertElement( abbr );
    }
};

});