2010-05-26 18 views
26
  • A veces los usuarios copian y pegan texto de diferentes fuentes a CKEditor, pero quiero restringir qué etiquetas pueden copiar a CKEditor.¿Cómo se definen las etiquetas permitidas en CKEditor?

  • Sólo tengo que usar ciertas etiquetas en CKEditor: La lista de etiquetas, etiqueta de salto, etc ...

  • ¿Puedo definirlos & desactivar las otras etiquetas en CKEditor?

+0

CKEditor 4 tiene un sistema completamente nuevo (de fantasía) para las etiquetas de filtrado: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter – Eli

Respuesta

24

Hay algunos ajustes que puede usar. Usted define estas configuraciones editando el archivo config.js en el directorio raíz del ckeditor. Por ejemplo, si usted quiere ser radical como yo, usted podría poner:

config.forcePasteAsPlainText = true; 

Si desea restringir sólo ciertas etiquetas exactamente como usted ha dicho, he encontrado la configuración de abajo:

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

El el ú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

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

+1

forcePasteAsPlainText no siempre funciona; ver http: //dev.ckeditor.com/ticket/756 – Damien

7

Hice esto para asegurarme de que nadie pudiera poner una etiqueta <input> en el editor. Probablemente se podría extender 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; 
         }, 
        } 
       }); 
      }); 
+1

Más sobre esto aquí: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor – Eli

3

me aplicó una selección limitada de etiquetas HTML directamente a la operación de pegado, utilizando el método de 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 : ''; 
    }); 
} 
+1

¿Es ese el análisis de expresiones regulares de HTML? – Nenotlep

+0

Tee hee! ¡DIOS MIO! ¿Podría ser? Pecados en la tierra. En realidad, es una eliminación de HTML, no de análisis, que es un propósito para el cual la expresión regular está afortunadamente bien adaptada. – Kato

+0

para ckeditor 4 reemplace 'evt.data ['html']' con 'event.data.dataValue' – user570605

6

Puede utilizar el whitelist plugin para definir en la configuración de una lista de elementos y atributos que están permitidos y denegar 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 la lista negra utiliza una lista blanca para eliminar todo lo que no está permitido.

+0

es una buena idea, pero el plugin no filtra arrastrar y soltar – Damien

+0

Lo bueno de proporcionar el complemento como fuente abierta debería ser que puede mejorarlo, o incluso pagarle a alguien para que haga lo que necesita. Incluso si el usuario arrastra y suelta algo, la salida se mantendrá limpia, por lo que es solo un error parcial y podríamos decir que el problema es que CKEditor no se engancha con arrastrar y soltar como lo hace con el pegado. – AlfonsoML

+0

Sí, creo que lo usaré de todos modos, gracias. En cuanto a solucionarlo, no parece fácil ver este error de ckeditor cerrado en "wontfix": http://dev.ckeditor.com/ticket/5473. – Damien

2
CKEDITOR.config.fullPage = false 

Indica si los contenidos que se van a editar se están ingresando como una página HTML completa. Una página completa incluye los elementos <html>, <head> y <body>. El resultado final también reflejará esta configuración, incluido el contenido <body> solo si esta configuración está desactivada.

4

Para agregar mi entrada, existe 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). Lo encuentro muy poderoso y muy agradable de configurar.

Ver más en http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter pero aquí hay un par de ejemplos en 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)"; 
Cuestiones relacionadas