在提交之前以编程方式编辑 CKEditor 的内容

Question

我在提交之前无法以编程方式编辑 ckeditor 的内容。

我在 html 中输入了一个文件，让用户上传一张图片。通过

将此图像插入到 ckeditor 实例中

CKEDITOR.instances['editor'].editable().insertHtml('<img class="image-content" width="350" height="450" src="' + image + '"' />');

这里的 image 变量是 base64 字节字符串，它变得很长。我想做的是在提交之前以编程方式从 img 标签中删除 src 属性。以下是我的尝试。

var content= CKEDITOR.instances['editor'].getData();
$(content).each(function (index, p) {
    if ($(p).find('img').length > 0) {
        $(p).find('img').each(function (index, img) {
            $(img).attr('src', '');
        });
    }
});

根据我的发现，ckeditor 的内容包含 p 标签列表。所以我遍历每个 p 标签，检查它是否包含 img 标签。如果是，请将其 src arrtibute 替换为空字符串。

我通过在最内层循环之后打印它来检查 content，似乎每个 img 的所有 src 标签没有被替换为空字符串。

有谁知道为什么这不起作用？还是我做错了什么？

Answer 1

$(content).find('p img').attr('src','');

...将删除 src 属性。甚至 .find('img')，如果您在 <p> 之外没有任何 <img> 需要保留其 src 属性。

您的代码可能存在的问题：

您在两个嵌套的 .each() 调用中使用相同的标识符 (index)。 不要！嵌套时使用不同的迭代器(i+j, a+b, i0+ i1+...)
您作为引用传递给 .each() 的元素已经是 jQuery 包装器，您不必再次包装它们。即：

.each(function (index, p) {
  p.find('img')  // and not $(p).find('img') !
  ...
}

在提交之前以编程方式编辑 CKEditor 的内容

Editing content of CKEditor programmatically before submit

jquery

ckeditor4.x