web-dev-qa-db-fra.com

Comment définir les balises autorisées dans CKEditor?

  • Parfois, les utilisateurs copient et collent du texte de différentes sources vers CKEditor, mais je veux restreindre les balises qu'ils peuvent copier dans CKEditor.

  • J'ai seulement besoin d'utiliser certaines balises dans CKEditor: la balise list, la balise break, etc ...

  • Puis-je les définir et désactiver les autres balises dans CKEditor?

ckeditor
26
kenpeter

Vous pouvez utiliser certains paramètres. Vous définissez ces paramètres en modifiant 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 souhaitez restreindre uniquement certaines balises exactement comme vous l'avez dit, j'ai trouvé le paramètre ci-dessous:

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

La dernière ne sera effectuée que lorsque l'utilisateur exécutera la commande "supprimer le format". Plus d'informations: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

Compte tenu de tout le temps, je pense que vous avez déjà trouvé votre réponse, mais d'autres peuvent être aidés.

24
Rafael Berlanda

Je viens de le faire pour m'assurer que personne ne pouvait mettre un <input> tag dans l'éditeur. Il pourrait probablement être étendu à d'autres balises:

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

Vous pouvez utiliser plugin liste blanche pour définir dans votre configuration une liste d'éléments et d'attributs autorisés et refuser toute autre chose.

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 la liste noire, il utilise une liste blanche afin que tout ce qui n'est pas autorisé soit supprimé.

6
AlfonsoML

Pour ajouter mon entrée, il existe depuis 4.1 la fonction Advanced Content Filter, qui permet des règles très spécifiques pour le contenu autorisé (quelles balises et quels styles/attributs/classes pour eux). 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)";
5
Nenotlep

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 : '';
   });
}
3
Kato
CKEDITOR.config.fullPage = false

Indique si le contenu à modifier est entré en tant que page HTML complète. Une page complète comprend le <html>, <head>, et <body> éléments. La sortie finale reflétera également ce paramètre, y compris le <body> contenu uniquement si ce paramètre est désactivé.

2
basit raza