web-dev-qa-db-ja.com

CKEditorは<i>タグを削除します

私はCKEditorを回避する解決策を見つけようとしていますが、古いFCKeditorは<i>以前に挿入されたコンテンツからdbへのタグ。

ケース：

データベースにhtmlコンテンツを挿入します。一部のコンテンツには<i>要素。これはCKEditorで行います。すべてが完璧に機能し、コンテンツがウェブページに表示されます。ただし、以前に挿入したコンテンツを編集する場合は、<i>要素がありません。

私の特定のケースでは、私が使用します：

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

もちろん、エディターを無効にすると、コンテンツはテキストエリアにうまく表示されます。

tagsckeditorfckeditor
45
HenryW

この特定の問題の解決策は、<i>タグ

drupal forum から得た元の答え

修正またはTweak（名前を付ける）は、ckeditors config.jsに次を設定することです。

// ALLOW <i></i>
config.protectedSource.Push(/<i[^>]*><\/i>/g);

リンクを指してくれてありがとうSpasticdonkey

53
HenryW

ProtectedSourceソリューションを使用すると、iタグは削除されなくなりますが、imgタグはCKEditorのWYSIWIGモードで表示されなくなります（4.3.1を使用しています）。私にとってうまくいった解決策は、_CKEDITOR.dtd.$removeEmpty_を使用して空のiタグの削除を無効にすることです。

たとえば、次をconfig.jsに追加しました

_// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;
_

注：これは、CKEDITOR.editorConfig = function( config )関数の外側に配置する必要があります。

62
Mike Peterson

ここに私のために働くものがあります

drupal ckeditorプロファイル設定admin/config/content/ckeditor/edit/Fullに同じ順序で以下の3行のコードを追加します

高度なオプション>>カスタムJavaScript設定

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

最初の行は、高度なフィルタリングをほとんどオフにしている

2行目は、p、div、li、およびulのすべてのクラス（）、任意のスタイル{}および任意の属性[*]を許可しています。

最後の行は空のタグ用です...この行は画像で動作します... config.protectedSource.Push（/] *> </ i>/g）;を使用すると、編集中にタグを取り除きます。

23
Alauddin

4.3バージョンckeditorの場合

config.js（configセクションの後）に貼り付け

CKEDITOR.dtd.$removeEmpty['b'] = false;

コードでウィジェットを書く

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

}）;

5
Andrey

次の2つの問題が考えられます。

  • 高度なコンテンツフィルタ についてお読みください。 CKEditorは許可されていない要素を削除していますが、フィルターのルールを拡張できます。

  • ただし、CKEditorが空の<i>要素の場合、他の使用方法を見つける必要があります。 CKEditorはWYSIWYG Webサイトビルダーではありません。これはドキュメントエディタであるため、ロードされるコンテンツには意味が必要です。空のインライン要素は意味を持たないため、削除されます。そうしないと、エディターはそれをどう処理するか分からないからです。

    （近い）将来の可能な解決策の1つは、空の要素を処理するために Widgets system を使用することです。しかし今のところ、 CKEDITOR.htmlDataProcessor および short guide の使用方法を確認することをお勧めします。

3
Reinmar