2

ツールバーにフォント、サイズ、テキスト、および背景色のボタンを備えたCKeditorインスタンス（バージョン4.1.2）があり、すべて完全にデフォルトです。

<textarea>データベースからコンテンツが読み込まれる を置き換えることによって作成されます。

読み込まれた html に次のような要素が含まれている場合:

<h3><font color="red">Big Red Heading</font></h3>

CKeditor は単にタグを削除して、次のようにします。

<h3>Big Red Heading</h3>

一方、（ドキュメントによると）私の期待は、これを次のように変換する必要があることでした。

<h3><span style="color:red">Big Red Heading</span></h3>

(同じ方法で、サイズと顔の属性を持つタグも取り除きます)。

allowedContentまたはcolorButton_foreStyle、またはこの問題に影響を与えるはずのその他の構成設定は変更していません。すべてのカスタム構成を削除しようとしましたが (エディターの完全にデフォルトのインスタンスを残して)、それでも発生します。

なぜこれが起こっているのか、そしてそれを修正する方法を誰かが説明できますか?

ありがとう。

EDIT : のデフォルト値はcolorButton_foreStyle、CKeditor ソースで次のように設定されます。

    CKEDITOR.config.colorButton_foreStyle = {
        element: 'span',
        styles: { 'color': '#(color)' },
        overrides: [ { element: 'font', attributes: { 'color': null } } ]
    };

...これが、フォントタグを自動的に変換することを期待した理由です..?

4

2 に答える 2

3

CKEditor は、既定で定義されているすべての可能な変換を持っているわけではありません。それらのセットがあり、将来拡張される予定ですが、この特定のものはまだ定義されていません。

高度なコンテンツ フィルター ガイドから- コンテンツの変換:

現在、一部のエディター機能に対してのみコンテンツ変換を定義していますが、将来のリリースではその数が増える予定です。

したがって、2 つの解決策があります。

  1. タグを保持したい場合は、 HTML 出力サンプルのようにプラグイン設定を定義および変更してfont、高度なコンテンツ フィルター設定を拡張します。config.extraAllowedContentfont
  2. タグを新しい対応するタグに自動的に変換するfont場合は、新しい変換を追加できます。詳しくはfilter#addTransformationsドキュメントをご覧ください。
于 2013-07-13T21:03:12.900 に答える
2

CKeditor 4でも同じ問題が発生しました。検索しましたが、解決策が得られませんでした。しかし、私はそれが必要なので、jsで独自のメソッドを作成しました. その素晴らしい作品。

私はownFunctoinを作成しました:

関数 ConvertFontTagToSpanTag(str) { 

        var startIndex = str.indexOf('<font');
        while (startIndex >= 0) {               

            var endIndex = str.substring(startIndex).indexOf('>');
            var subString1 = str.substring(startIndex, (startIndex + endIndex) + 1);
            var subString2 = subString1;              

            var mapObj = {
                size: "font-size:",
                face: "font-family:",
                color: "color:"
            };
            subString2 = subString2.replace(/size|face|color/gi, function (matched) {
                return mapObj[matched];
            });

            subString2 = subString2.replace(/['"]/g, ';');
            subString2 = subString2.replace(/=;/g, '');

            subString2 = subString2.replace('font', 'span');
            if (subString2.length > 6) {
                subString2 = [subString2.slice(0, 6), 'style=\"', subString2.slice(6)].join('');
                subString2 = [subString2.slice(0, subString2.length - 1), '\"', subString2.slice(subString2.length - 1)].join('');
            }

            //Converting Font-size           
            var sizeIndex = subString2.indexOf('font-size:');
            if (sizeIndex >= 0) {
                var sizeEndIndex = subString2.substring(sizeIndex).indexOf(';');
                var size = subString2.substring(sizeIndex + 10, (sizeIndex + sizeEndIndex));
                //Removing Font size
                subString2 = subString2.slice(0, (sizeIndex + sizeEndIndex) - 1) + subString2.slice((sizeIndex + sizeEndIndex));                  
                //Adding Font Size
                subString2 = [subString2.slice(0, (sizeIndex + sizeEndIndex)-1), ConvertSpanFontSize(size), subString2.slice((sizeIndex + sizeEndIndex)-1)].join('');

            }
            //end

            str = str.replace(subString1, subString2);

            startIndex = str.indexOf('<font');            

        }
        str = str.replace(/font>/g, 'span>');
        return str;

    }

    function ConvertSpanFontSize(size) {
        switch (size) {
            case '1': return '0.63em';
            case '2': return '0.82em';
            case '3': return '1.0em';
            case '4': return '1.13em';
            case '5': return '1.5em';
            case '6': return '2em';
            case '7': return '3em';                
            default: return '4em';
        }

乾杯...！ありがとうございました

于 2015-08-19T05:38:01.473 に答える