Программное редактирование содержимого CKEditor перед отправкой

У меня возникли проблемы с программным редактированием содержимого ckeditor перед отправкой.

У меня есть ввод файла в моем html, и я позволяю пользователю загружать изображение. Это изображение вставляется в экземпляр ckeditor, выполняя

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

Здесь переменная image представляет собой строку байтов base64, которая становится довольно длинной. Я пытаюсь программно избавиться от атрибута src из тега img перед отправкой. Ниже то, что я пытался.

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 пустой строкой.

Я проверил content, напечатав его после самого внутреннего цикла, и оказалось, что все src каждого тега img не были заменены пустой строкой.

Кто-нибудь знает, почему это не работает? Или я что-то не так здесь делаю?


jquery ckeditor4.x
person eChung00    schedule 26.04.2017    source источник
comment
Хм, разве p и img не должны быть заключены в кавычки?   -  person Chris Happy    schedule 27.04.2017
comment
Документация: origin-docs.ckeditor.com/ckeditor4/docs /#!/апи/   -  person pd_au    schedule 23.02.2020

Ответы (1)


arrow_upward
1
arrow_downward 

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

... удалит атрибуты src. Или даже .find('img'), если у вас нет <img> вне <p>, которым необходимо сохранить атрибуты src.

Возможные проблемы с вашим кодом:

  • вы используете один и тот же идентификатор (index) в двух вложенных вызовах .each(). Не делайте этого! Используйте разные итераторы при вложении (i+j, a+b, i0+i1+...)
  • элементы, которые вы передаете как ссылку на .each(), уже являются оболочками jQuery, вам не нужно их снова обертывать. то есть:
.each(function (index, p) {
  p.find('img')  // and not $(p).find('img') !
  ...
}
person tao    schedule 26.04.2017
comment
Я сделал контент как экземпляр jquery и назначил дополнительную переменную как var tmp = $(content);. Манипулирование этим tmp сработало, как я и ожидал, но я не уверен, почему. LOL В любом случае, спасибо за ваш ответ. Это помогло. - person eChung00; 27.04.2017
comment
Это потому, что оболочки jQuery — это не то же самое, что элементы, которые они оборачивают. Элемент DOM находится внутри свойства 0 оболочки, если оболочка не является набором элементов. Удачного кодирования! - person tao; 27.04.2017