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?
Respuesta
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.
forcePasteAsPlainText no siempre funciona; ver http: //dev.ckeditor.com/ticket/756 – Damien
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;
},
}
});
});
Más sobre esto aquí: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor – Eli
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 : '';
});
}
¿Es ese el análisis de expresiones regulares de HTML? – Nenotlep
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
para ckeditor 4 reemplace 'evt.data ['html']' con 'event.data.dataValue' – user570605
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.
es una buena idea, pero el plugin no filtra arrastrar y soltar – Damien
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
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
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.
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)";
- 1. <br/> etiquetas se están agregando automáticamente a las etiquetas html en ckeditor
- 2. CKeditor elimina etiquetas vacías
- 3. Preservar etiquetas SCRIPT (y más) en CKEditor
- 4. ¿Cómo se definen las sangrías en vim basadas en llaves?
- 5. ¿Cómo se definen las funciones locales en PHP?
- 6. ¿Cómo se definen las constantes de cadena en C++?
- 7. ¿Cómo se definen las rutas relativas en Visual Studio Project?
- 8. ¿Cómo se definen las instrucciones de uso en web.config?
- 9. ¿Cómo se definen las propiedades de una clase en php?
- 10. CKeditor: ¿Cómo puedo hacer que algunas etiquetas como H3, H4, no editable h5 en CKEditor
- 11. ¿Cómo se desactivan las opciones del menú Formato en CKeditor?
- 12. ¿Cómo se definen las variables estáticas locales locales de subprocesos?
- 13. ¿Cómo se definen las fábricas anidadas con FactoryGirl?
- 14. ¿Cómo se definen las restricciones de entrada de TextBox?
- 15. ¿Dónde se definen las palabras clave en Ruby?
- 16. ¿Cómo se definen las funciones de ColdFusion con el atributo access = "remote" usando scripting?
- 17. Autenticación básica de Apache, excepto las permitidas
- 18. ¿Están permitidas las operaciones estándar de iterador?
- 19. ¿Cómo se definen las líneas dobles para las formas de borde y nodo en graphviz dot?
- 20. ¿Cómo se determina si CKEditor está cargado?
- 21. ¿Cómo se modelan las etiquetas en la base de datos?
- 22. ¿Cómo se encuentran las etiquetas que no coinciden en HTML?
- 23. ¿Cómo se definen los sistemas LTI con retraso en Scipy?
- 24. ¿Cómo se definen las constantes en Visual C# como #define en C?
- 25. etiquetas html en las etiquetas de opción
- 26. ¿Por qué las estructuras estáticas no están permitidas en C#?
- 27. ¿Qué son las etiquetas de documentación C#?
- 28. ¿Cómo se definen los parciales de bigote en HTML?
- 29. ¿Cómo se definen los selectores de atributos en SASS?
- 30. ¿Cómo se definen claves compuestas en MS Access?
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