CKEditor strips <i> Тег

Я пытаюсь найти решение, чтобы избежать CKEditor, но и старый FCKeditor удаляет любые тег <i> из ранее вставленного содержимого в db.

Случай:

Я вставляю содержимое html в db, в некотором содержимом содержатся элементы <i>. Я делаю это с CKEditor. Все работает отлично, и контент отображается на веб-странице. Но когда я хочу отредактировать ранее вставленный контент, элементы <i> отсутствуют.

В моем конкретном случае я использую:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Конечно, если я отключу редактор, содержимое отобразится просто в текстовом поле.

Ответы

Ответ 1

Я нашел решение этой конкретной проблемы, с которой я столкнулся с тегом <i>

Оригинальный ответ, который я получил от форума drupal

Исправить или настроить (вы называете это), чтобы установить следующее в ckeditors config.js:

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

Благодаря Spasticdonkey для ссылки на ссылку.

Ответ 2

Когда используется решение protectedSource, теги i больше не разделяются, но теги img перестают отображаться в режиме WYSIWIG CKEditor (я использую 4.3.1). Решение, которое лучше для меня работало, - отключить удаление тегов i с помощью CKEDITOR.dtd.$removeEmpty

Например, я добавил следующее в config.js 

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

Примечание. Это должно быть помещено вне функции CKEDITOR.editorConfig = function( config ).

Ответ 3

Вот что работает для меня

добавьте 3 строки кода ниже в том же порядке в настройке профиля drpal ckeditor админ/конфигурации/содержание/CKEditor/редактировать/Full

ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ → Пользовательская настройка JavaScript

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

Ответ 4

Возможны две проблемы:

  • Прочитайте Расширенный фильтр содержимого. CKEditor удаляет элементы, которые не разрешены, но вы можете расширить правила фильтрации.

  • Однако, если проблема в том, что CKEditor удаляет пустые элементы <i>, вам нужно найти другой способ его использования. CKEditor не является создателем веб-сайта WYSIWYG. Это редактор документов, поэтому загруженный контент должен иметь значение. Пустой встроенный элемент не имеет никакого значения, поэтому он удален, потому что иначе редактор не знал, что с ним делать.

    Одним из возможных решений будущего (ближайшего) будет использование Widgets system для обработки этих пустых элементов. Но сейчас я советую вам проверить CKEDITOR.htmlDataProcessor и короткое руководство как его использовать.

Ответ 5

для версии 4.3 cceditor

в config.js(после раздела конфигурации) вставить

CKEDITOR.dtd.$removeEmpty['b'] = false;

и напишите виджет с кодом

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

});