Question

我已经在下面添加了部分javascript，我想知道的是成功后它会向编辑器添加一个图像。但是如何在添加新图像之前首先从编辑器中删除所有图像？

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是CKEDITOR.editor类的实例。因此，这是正确的解决方案：

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

我能够成功地完成任务。 basicall我在CKEditor中使用了两种方法。

的getData（）; 使用setData（）;

首先，我从实例中获取了数据。我将它附加到临时创建的dom元素。之后，我能够操纵内容。完成操作后，我获得了temprorary dom-element的html内容，并使用setData（）将其放在CKEditor中。它可能是hacky，我不确定这是否真的是正确的方法，但确实有效。

编辑器的实例：

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

以下内容应该有效。它会找到oEditor元素中的所有img元素，并将它们从父元素中删除...

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!' );
}

是否可以在添加新标记之前修改此标记以删除所有<img/>标记

4 个答案: