Parfois, les utilisateurs copient et collent du texte provenant de différentes sources vers CKEditor, mais je souhaite restreindre les balises qu'ils peuvent copier dans CKEditor.Comment définir les balises autorisées dans CKEditor?
Je ne ai besoin d'utiliser certaines balises dans CKEditor: La balise de liste, balise de saut, etc ...
Puis-je les définir & désactiver les autres balises CKEditor?
Vous pouvez utiliser certains paramètres. Vous définissez ces paramètres en éditant le fichier config.js dans le répertoire racine de ckeditor. Par exemple, si vous voulez être radical comme moi, vous pouvez mettre:
config.forcePasteAsPlainText = true;
Si vous voulez limiter seulement certaines balises exactement comme vous l'avez dit, j'ai trouvé le réglage ci-dessous:
config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';
Le le dernier ne sera effectué que lorsque l'utilisateur exécutera la commande "remove format". Plus d'informations: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags
Considérant tout le temps, je pense que vous avez déjà trouvé votre réponse, mais d'autres peuvent être aidés.
forcePasteAsPlainText ne fonctionne pas toujours, voir http: //dev.ckeditor.com/ticket/756 – Damien
Je viens de le faire pour m'assurer que personne ne pouvait mettre une balise <input> dans l'éditeur. Il pourrait probablement être étendue à d'autres tags:
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;
},
}
});
});
Pour en savoir plus, cliquez ici: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor – Eli
j'ai appliqué une sélection limitée de balises HTML directement à l'opération de collage, en utilisant la méthode 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 : '';
});
}
Est-ce que c'est une expression régulière d'HTML? – Nenotlep
Tee hee! OMG! Est-ce que ça pourrait être? Les péchés sur la terre. En fait, c'est le décapage de HTML, pas d'analyse, qui est un but pour lequel regex est heureusement bien adapté. – Kato
pour ckeditor 4 remplacer 'evt.data ['html']' par 'event.data.dataValue' – user570605
Vous pouvez utiliser le whitelist plugin pour définir dans la configuration d'une liste d'éléments et d'attributs qui sont autorisés et refuser quoi que ce soit d'autre. C'est fondamentalement la même solution présentée par Paul Tomblin mais il devrait être plus facile de gérer plus d'éléments au lieu de copier beaucoup de code et au lieu de liste noire il utilise une liste blanche pour que tout ce qui n'est pas autorisé soit supprimé.
c'est une bonne idée, mais le plugin ne filtre pas le glisser-déposer – Damien
La bonne partie à propos de la fourniture du plugin en open source devrait être que vous pouvez l'améliorer, ou même payer quelqu'un pour faire ce dont vous avez besoin. Même si l'utilisateur fait glisser et dépose quelque chose, la sortie restera nettoyée, donc ce n'est qu'un bug partiel et nous pourrions dire que le problème est que CKEditor ne se bloque pas par glisser-déposer comme il le fait avec le collage. – AlfonsoML
Oui, je pense que je vais l'utiliser quand même, merci. En ce qui concerne la correction, il ne semble pas facile de voir ce bug de ckeditor a été fermé à "wontfix": http://dev.ckeditor.com/ticket/5473. – Damien
CKEDITOR.config.fullPage = false
Indique si le contenu à modifier est entré en tant que page HTML complète. Une page complète comprend les éléments <html>, <head> et <body>. La sortie finale reflétera également ce paramètre, y compris le contenu <body> uniquement si ce paramètre est désactivé.
Pour ajouter mes entrées, il existe depuis la version 4.1 la fonction Advanced Content Filter, qui permet d'avoir des règles très spécifiques pour le contenu autorisé (quelles balises et quels styles/attributs/classes pour elles). Je le trouve très puissant et très agréable à configurer.
En savoir plus sur http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter mais voici quelques exemples de la page
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)";
CKEditor 4 a un nouveau système (fantaisie) pour l'ensemble des balises de filtrage: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter – Eli