Как определить разрешенные теги в CKEditor?

Question

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

• Мне нужно использовать только некоторые теги в CKEditor: тег списка, тег разрыва и т. Д. *

• Могу ли я определить их и отключить другие теги в CKEditor?

Answer 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

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

Answer 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;
                        },
                    }
                });
            });

Answer 3

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

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

Answer 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)";

Answer 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 : '';
   });
}

Answer 6

CKEDITOR.config.fullPage = false

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