Как определить допустимые теги в CKEditor?

Иногда пользователи копируют и вставляют текст из разных источников в CKEditor, но я хочу ограничить, какие теги они могут копировать в CKEditor.
Мне нужно только использовать определенные теги в CKEditor: тег списка, тег разрыва и т.д.
Могу ли я определить их и отключить другие теги в CKEditor?

Ответ 1

Есть некоторые настройки, которые вы можете использовать. Вы определяете эти параметры, редактируя файл config.js в корневом каталоге ckeditor. Например, если вы хотите быть радикальным, как я, вы можете поставить:

config.forcePasteAsPlainText = true;

Если вы хотите ограничить только определенные теги в точности так, как вы сказали, я нашел настройку ниже:

config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';

Последнее будет сделано только тогда, когда пользователь выполнит команду "удалить формат". Дополнительная информация: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

Учитывая все время, я думаю, что вы уже нашли свой ответ, но другим может помочь.

Ответ 2

Я просто сделал это, чтобы никто не мог поместить тег <input> в редактор. Вероятно, он может быть распространен на другие теги:

            CKEDITOR.on('instanceReady', function(ev)
            {
                var editor = ev.editor;
                var dataProcessor = editor.dataProcessor;
                var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
                htmlFilter.addRules(
                {
                    elements : 
                    {
                        input: function(element)
                        {
                            return false;
                        },
                    }
                });
            });

Ответ 3

Вы можете использовать плагин whitelist, чтобы определить в вашей конфигурации список элементов и атрибутов, которые разрешены, и запретить что-либо еще.

Это в основном то же самое решение, представленное Паулем Томблином, но должно быть проще обрабатывать больше элементов вместо копирования большого количества кода, а вместо черного списка он использует белый список, чтобы все, что не разрешено, удалялось.

Ответ 4

Чтобы добавить мой ввод, существует функция расширенного фильтра содержимого с 4.1, которая позволяет использовать очень конкретные правила для разрешенного контента (какие теги и какие стили/атрибуты/классы для них). Я нахожу его очень мощным и очень приятным для настройки.

Подробнее на http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter, но здесь несколько примеров со страницы

config.allowedContent = true; // to allow all

// A rule accepting <p> and <h1> elements with optional "left" and "right" classes.
// Note: Both elements may contain these classes, not only <h1>.
config.allowedContent = "p h1(left,right)";

// Rules allowing:
// * <p> and <h1> elements with an optional "text-align" style,
// * <a> with a required "href" attribute,
// * <strong> and <em> elements,
// * <p> with an optional "tip" class (so <p> element may contain
//  a "text-align" style and a "tip" class at the same time).
config.allowedContent = "p h1{text-align}; a[!href]; strong em; p(tip)";

Ответ 5

Я применил ограниченный выбор тегов html непосредственно к операции вставки, используя метод strip_tags из phpjs.org.

CKEDITOR.on('instanceReady', function(ev) {
   ev.editor.on('paste', function(evt) {
      evt.data['html'] = strip_tags(evt.data['html'], 
         '<i><em><b><strong><blockquote><p><br><div><ul><li><ol>' // allowed list
      );
   });
});

function strip_tags (input, allowed) {
   // http://phpjs.org/functions/strip_tags (http://kevin.vanzonneveld.net)
   allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
   var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
      commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
   return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
   });
}

Ответ 6

CKEDITOR.config.fullPage = false

Указывает, будет ли содержимое, подлежащее редактированию, вводиться как полная HTML-страница. Полная страница включает элементы <html>, <head> и <body>. Конечный результат также будет отражать этот параметр, включая содержимое <body>, только если этот параметр отключен.