2

中心に ckeditor を使用する CMS があります。ckeditor のバージョンを最新にアップグレードしたところ、エディターで画像を左または右に配置すると、「整列」属性ではなくインライン スタイルになります。

インライン スタイルは問題ではありませんが、エディターで各画像にスタイルを追加する必要なく、プログラムで CSS を介して画像にパディングを適用できるように、「align」属性を残す必要があります (CMS のユーザーは技術的にそうではないため)。これを行う資格があります）。

style 属性を持つ画像を検索する関数を作成し、align 属性を割り当てることに成功しました。次に、「setData」を使用してエディターを更新し、「getData」を実行すると、更新が残っているようです。ただし、保存プロセス中のある時点で、これが削除されるようです。これがどこにあるか、または整列とスタイル整列の両方を同時に追加する方法についてのアイデア。

4

3 に答える 3

3

皮肉なことにグーグルでさらに多くのことをした後、私はここで答えを見つけました：

フロートの代わりに CKEditor で画像を整列

検索で出てこない理由がよくわかりません。これは確かにうまくいきましたが、幅と高さに関連する行を削除し、'float' css 属性の置換を削除しました。それを除けば、すべて良いです！

更新: これが CKeditor 4 でうまく機能しない場合があり、コードのこの小さなエディションで修正されていることがわかりました。

element.forEach             = function(){};
element.writeChildrenHtml   = function(){};

参照: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/

したがって、完全なコード ブロックは次のようになります。

CKEDITOR.on('instanceReady', function( ev )
{        
    // Ends self closing tags the HTML4 way, like <br>.
    // See: https://stackoverflow.com/questions/4466185/ckeditor-align-images-instead-of-float
    // Mod added for CKE 4
    // See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/
    ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function( element )
            {
                // Output dimensions of images as width and height
                if( element.name == 'img' )
                {
                    var style = element.attributes.style;

                    if( style )
                    {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                        width = match && match[ 1 ];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                        var height = match && match[ 1 ];

                        // Get the float from the style.
                        match = /(?:^|\s)float\s*:\s*(\w+)/i.exec( style );

                        var align = match && match[ 1 ];

                        if( align )
                        {
                            element.attributes.align = align;
                        }
                    }

                    element.forEach             = function(){};
                    element.writeChildrenHtml   = function(){};
                }

                return element;
            }
        }
    });
});
于 2013-08-21T11:01:43.840 に答える
2

簡単な修正として (CKEditor ファイルを掘り下げたくない場合)、CSS を使用して画像のスタイルを設定することがalignできclassます*。

例：

img[style*=left] { 
    float: left; 
    margin: 0px 20px 10px 0px; 
}

img[style*=right] { 
    float: right;
    margin: 0px 0px 10px 20px; 
}

この[style*=]プロパティを使用して、CKEditor によって画像に適用される「左」または「右」という単語のインラインstyle=""属性を確認し、必要に応じてスタイルを設定できます。クライアントは引き続き配置ドロップダウンを使用して、画像を左または右にフロートさせるかどうかを選択するため、変更にまったく気付かない.

@Eth と同じ問題に遭遇しましたが、ckEditor 全体が縮小されており、ほとんど編集できませんでした。これが別の解決策を提供することを願っています!

于 2014-05-06T19:01:56.397 に答える
0

フィルターが「フル HTML」であること、許可された HTML タグの制限がオフであること、メディア タグをマークアップに変換するがチェックされていること、およびフィルター処理順序でメディア タグをマークアップに変換することが一番上にあることを確認します。出来上がりです

于 2014-10-14T07:23:25.517 に答える