Is It Possible To Modify This To Remove All Tags Before Adding The New One

I have included part of my javascript below and what I want to know is upon success it adds an image to the editor. But how do I make it first remove all images from the editor bef

Solution 1:

oEditor is an instance of CKEDITOR.editor class. Therefore this is the right solution:

if ( oEditor.mode == 'wysiwyg' && oEditor.editable() ) {
    var images = oEditor.editable().getElementsByTag( 'img' );

    while ( images.count() ) {
        var image = images.getItem( 0 ); // This is a live collection.// Whether this is a real image, not e.g. anchor icon.if ( image.data( 'cke-saved-src' ) )
            image.remove();
    }
}

Solution 2:

I was able to work something out with success. basicall there are two methods in CKEditor that I used.

getData(); setData();

First I got the data from the instance. I attached it to a temporary created dom-element. After that I am able to manipulate the content. After done the manipulations, I get the html content of the temprorary dom-element and use setData() to place it in the CKEditor. It may be hacky and I am not sure if this is really the correct way, but it does work.

The instance of the editor:

var forum_signature = CKEDITOR.replace('textAreaName');
var oEditor = CKEDITOR.instances.forum_signaturevar jsonImage = 'images/img2.jpg';
var temp = $("<div/>", {
    id: "temp"
});

var data = oEditor.getData();
$(data).appendTo(temp);
// you now can traverse the "temp" element in the dom
$(temp).find("img").eq(0).remove();

// You can add html
$(temp).append('<img src=' + jsonImage + ' alt="Image" /><p>Hello World</p>');
var newData = $(temp).html();
$(temp).remove();
oEditor.setData(newData);