plugin - ¿Cómo definir las etiquetas permitidas en CKEditor?

ckeditor last version

Question

• A veces, los usuarios copian y pegan texto de diferentes fuentes a CKEditor, pero quiero restringir qué etiquetas pueden copiar a CKEditor.

• Solo necesito usar ciertas etiquetas en CKEditor: la etiqueta de lista, etiqueta de rotura, etc.

• ¿Puedo definirlos y deshabilitar las otras etiquetas en CKEditor?

Answer 1

Hay algunas configuraciones que puedes usar. Usted define estas configuraciones editando el archivo config.js en el directorio raíz del ckeditor. Por ejemplo, si quieres ser radical como yo, podrías poner:

config.forcePasteAsPlainText = true;

Si desea restringir solo ciertas etiquetas exactamente como dijo, encontré la siguiente configuración:

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

Lo último se hará solo cuando el usuario ejecute el comando "eliminar formato". Más información: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

Teniendo en cuenta todo el tiempo, creo que ya ha encontrado su respuesta, pero se puede ayudar a otros.

Answer 2

Para agregar mi entrada, hay desde 4.1 la función Filtro de contenido avanzado, que permite reglas muy específicas para el contenido permitido (qué etiquetas y qué estilos / atributos / clases para ellas). Me parece muy potente y muy agradable de configurar.

Lea más en docs.ckeditor.com/#!/guide/dev_advanced_content_filter pero aquí hay algunos ejemplos de la página

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 3

Puede usar el complemento de la lista blanca para definir en su configuración una lista de elementos y atributos permitidos y negar cualquier otra cosa.

Básicamente, es la misma solución presentada por Paul Tomblin, pero debería ser más fácil manejar más elementos en lugar de copiar un montón de código y en lugar de una lista negra, utiliza una lista blanca para que se elimine todo lo que no esté permitido.

Answer 4

Simplemente hice esto para asegurarme de que nadie pudiera poner una etiqueta <input> en el editor. Probablemente podría extenderse a otras etiquetas:

            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 5

strip_tags una selección limitada de etiquetas html directamente a la operación de pegar, usando el método strip_tags de 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

Indica si los contenidos a editar se están ingresando como una página HTML completa. Una página completa incluye los elementos <html> , <head> y <body> . La salida final también reflejará esta configuración, incluidos los contenidos <body> solo si esta configuración está deshabilitada.