是否可以修改它以删除所有 <img> 标签，然后添加新的

Question

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 before adding the new one?

onComplete: function (file, json) {
  $('#upload-image').attr('disabled', false);
  $('.error-upload').remove();
  if (json['success']) {
    alert(json['success']);
    var oEditor = CKEDITOR.instances.forum_signature;
    var value = document.getElementById('forum_signature').value;
    if (oEditor.mode == 'wysiwyg') {
      oEditor.insertHtml('<img src="' + json['image'] + '" alt="Image" /><p>&nbsp;</p>');
    } else {
      alert('You must be in WYSIWYG mode!');
    }
  }
  if (json['error']) {
    $('#upload').after('<span class="error-upload" style="color:red;">' + json['error'] + '</span>');
  }
  if (json['error_size']) {
    $('#upload').after('<span class="error-upload" style="color:red;">' + json['error_size'] + '</span>');
  }
  $('.loading').remove();
}

Answer 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();
    }
}

Answer 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_signature

var 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);

Answer 3

你可以这样做：

$(oEditor).children("img").remove();

Answer 4

The following should work. It finds all of the img elements inside of your oEditor element and removes them from their parent...

if ( oEditor.mode == 'wysiwyg' )
{
    // Create an array of img elements.
    imgs = oEditor.getElementsByTagName("img");
    // Remove each img from its parent node.
    for (var i=0; i<imgs.length; i++) {
        imgs[i].parentNode.removeChild(imgs[i]);
    }
    oEditor.insertHtml( '<img src="'+ json['image'] +'" alt="Image" /><p>&nbsp;</p>' );
}
else{
    alert( 'You must be in WYSIWYG mode!' );
}