web-dev-qa-db-ja.com

CKEditorで許可されたタグを定義する方法は？

  • 時々、ユーザーはテキストを異なるソースからCKEditorにコピーアンドペーストしますが、CKEditorにコピーできるタグを制限したいと思います。

  • CKEditorで特定のタグのみを使用する必要があります：リストタグ、ブレークタグなど...

  • それらを定義してCKEditorの他のタグを無効にできますか？

ckeditor
26
kenpeter

使用できる設定がいくつかあります。これらの設定は、ckeditorのルートディレクトリにあるconfig.jsファイルを編集して定義します。たとえば、私のように急進的になりたい場合は、次のように記述できます。

config.forcePasteAsPlainText = true;

あなたが言ったように特定のタグのみを制限したい場合、私は以下の設定を見つけました：

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

最後は、ユーザーが「remove format」コマンドを実行したときにのみ行われます。詳細情報： http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

いつも考えると、あなたはすでにあなたの答えを見つけたと思いますが、他の人が助けることができます。

24
Rafael Berlanda

これは、誰も<input>タグをエディターに配置できないようにするためです。それはおそらく他のタグに拡張できます：

            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

whitelist plugin を使用して、許可されている要素と属性のリストを構成に定義し、それ以外のものを拒否できます。

基本的には、Paul Tomblinが提示したのと同じソリューションですが、大量のコードをコピーする代わりに、より多くの要素を処理する方が簡単であり、ブラックリストの代わりにホワイトリストを使用することで、許可されていないものはすべて削除されます。

6
AlfonsoML

私の入力を追加するために、4.1以降、高度なコンテンツフィルター機能が追加されました。これにより、許可されたコンテンツの非常に具体的なルール（どのタグ、どのタグのスタイル/属性/クラス）が許可されます。とてもパワフルで、設定がとてもいいと思います。

詳しくは http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter をご覧ください。ただし、このページの例をいくつか示します

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

Phpjs.orgの strip_tags メソッドを使用して、限定された選択のHTMLタグを貼り付け操作に直接適用しました。

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

編集するコンテンツが完全なHTMLページとして入力されているかどうかを示します。ページ全体には、<html>、<head>、および<body>要素が含まれます。最終的な出力には、この設定が無効になっている場合にのみ、<body>の内容を含むこの設定も反映されます。

2
basit raza