Jump to content
We want to feature your community! ×

Community

How to properly add content to CKEditor?


Safety1st
 Share

Recommended Posts

I'd like to add some HTML content to CKEditor editing area after user clicks on something.
Previously it was done by the following code:

var editor = ips.ui.editor.getObj($('[data-role="replyArea"] [data-ipsEditor]'));
if (editor) {
    editor.unminimize();
    ...
    editor.insertHtml(html);
    editor.focus();
}

But this method doesn't work properly on the last IPS4 builds. I get the weird error right after executing editor.insertHtml(html):

"q is undefined"

 

Link to comment
Share on other sites

The code doesn't work correctly if editor's window was not activated first. I get 'range is undefined' error. Here is the video :)

Here is the code :)

 try {
            var editor = ips.ui.editor.getObj($('[data-role="replyArea"] [data-ipsEditor]'));
            if (editor) {
                editor.unminimize();
                var url = $(this).attr('data-ipshover-target').split('do=hovercard')[0];
                var id = url.replace(new RegExp("(.*)/profile/([0-9]+)-(.*)", 'g'), "$2");
                var hovercard = url + 'do=hovercard';
                url = url.substr(0, url.length - 1);
                var name = $(this).text();
                var a = $('<a>').attr({
                    'contenteditable': 'false',
                    'href': url,
                    'data-ipshover-target': hovercard,
                    'data-mentionid': id,
                    'data-ipshover': ''
                }).text('@' + name);
                var div = $('<div>').append(a);
                var aHTML = div.html().trim();
                editor.insertHtml(aHTML);
                editor.focus();
            }
        }
        catch (e) {
            console.log(e.message);
        }

editor.insertHtml('<b>test</b>') leads to the same result.

Edited by Safety1st
Link to comment
Share on other sites

setTimeout(function(){
	editor.insertHtml(aHTML);
	editor.focus();
}, 200);

you need to setup some sort of timeout/delay. there are better ways to do this, but this gives you an idea. what is happening, when you call editor.unminimize(), the editor isn't fully initialized yet, so the editor.insertHtml()/focus() call are causing an error.

Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy