0

我在下面包含了我的 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();
}
4

4 回答 4

4

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();
    }
}
于 2013-04-13T18:03:08.447 回答
0

我能够成功地解决问题。基本上，我使用了 CKEditor 中的两种方法。

获取数据（）；设置数据（）；

首先，我从实例中获取数据。我将它附加到一个临时创建的 dom 元素上。之后，我能够操纵内容。完成操作后，我获取临时 dom 元素的 html 内容并使用 setData() 将其放置在 CKEditor 中。这可能很老套，我不确定这是否真的是正确的方法，但它确实有效。

编辑器的实例：

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);
于 2013-04-13T15:16:32.827 回答
0

以下应该工作。它会找到img您的 oEditor 元素内的所有元素并将它们从其父元素中删除......

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!' );
}
于 2013-04-13T15:28:11.540 回答
0

你可以这样做：

$(oEditor).children("img").remove();
于 2013-04-13T15:18:07.853 回答