CKEDITOR - предотвращать добавление размеров изображения в стиле css

Ответ 1

Вы можете решить эту проблему, вставив этот код в config.js своего CKEditor

CKEDITOR.on('instanceReady', function (ev) {
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];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

Ответ 2

Есть еще один способ сделать это (гораздо проще), используя Запрещенный контент, представленный в CKEditor 4.4.0:

CKEDITOR.replace( 'editor1', {
    disallowedContent : 'img{width,height}'
} );

или в config.js:

config.disallowedContent = 'img{width,height}';

Это правило будет запрещать встроенные стили (ширина и высота) для элемента img, вместо этого CKEditor будет использовать атрибуты.

Если по какой-то причине вы заметите, что элементы ввода ширины/высоты в диалоговом окне "Изображение" теперь исчезли, установите также следующее:

config.extraAllowedContent = 'img[width,height]';

Ответ 3

Я не верю, что вы можете сделать это, не изменяя файл плагина изображения CKEDITOR..

Если вы ищете свой сайт отслеживания ошибок, вы увидите, что они стараются "избегать устаревших атрибутов XHTML" в пользу стилизации. (Избегать устаревших атрибутов изображения)

Место для поиска, если вы хотите сделать это самостоятельно (путем изменения исходных файлов), это этот файл: plugins_image_dialogs_image.js Вы увидите, что они специально удаляют атрибут и добавляют эквивалент стиля.

Ответ 4

Эй, я понял это! Поэтому я создал учетную запись здесь, чтобы опубликовать это для всех вас. Я не использую его для бюллетеня Outlook, но он должен работать для этого, потому что он добавляет атрибуты высоты и ширины к тегам img.

Если нам когда-нибудь захочется сделать это снова, вот как именно я это сделал.

Сначала я нашел некоторые полностью отформатированные и прокомментированные исходные файлы:

http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js

Итак, я получил источник плагинов/изображений/диалогов/image.js:

svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs

Если у вас есть номера строк в каждой строке, потому что вы не загрузили их и просто скопировали, вы можете удалить их, выполнив эту команду (из терминала Linux):

cut -c 5- image.js > image2.js

Или просто нажмите ссылку "Оригинальный формат" в нижней части страницы по 1-й ссылке выше.

Теперь у нас есть чистый исходный файл, готовый к редактированию.

Оригинальная упакованная версия была 19k в той, что у меня была. Исправленный исходный код был 45k. Но он должен загружаться только тогда, когда кто-то что-то редактирует и не должен быть проблемой. Если это тогда просто переупаковать его.

Версия, которую я имею, может отличаться от той, которая у вас есть, поэтому я покажу вам, какие строки я модифицирую, а затем то, что я сделал с ними.

Заменить строки 636-641:

if ( value )
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'width' );

!internalCommit && element.removeAttribute( 'width' );

с:

if ( value ) {
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'width', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'width' );
    element.removeAttribute( 'width' );
}

//!internalCommit && element.removeAttribute( 'width' );

Заменить строку 653 (657 после внесенных изменений):

element.setStyle( 'width', value + 'px');

с:

element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );

Заменить строки 686-692 (691-697 после внесенных изменений):

if ( value )
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'height' );

if ( !internalCommit && type == IMAGE )
    element.removeAttribute( 'height' );

с:

if ( value ) {
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'height', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'height' );
    element.removeAttribute( 'height' );
}

//if ( !internalCommit && type == IMAGE )
//  element.removeAttribute( 'height' );

Заменить строку 704 (712 после внесенных изменений):

element.setStyle( 'height', value + 'px' );

с:

element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );

Единственный улов в том, что он не работает, когда вы перетаскиваете контрольные точки для его изменения. Я не мог понять эту часть. После перетаскивания контрольных точек для изменения размера просто откройте "Свойства изображения" и нажмите "ОК", и он снова добавит атрибуты ширины и высоты.

Ответ 5

Когда вы сохраняете форму, сделайте это

var CKEDITOR   = window.parent.CKEDITOR;   
        for ( var i in CKEDITOR.instances ){
           var currentInstance = i;
           break;
        }
        var oEditor = CKEDITOR.instances[currentInstance];
        oEditor.dataProcessor.htmlFilter.addRules({
            elements :{
                img : function( element ){
                    if(!element.attributes.width){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findwidth = new RegExp("\[width: \]\s*(((?!\[width: \]|\[px\]).)+)\s*\[px\]")
                            var sWidth = findwidth.exec(styling)
                            sWidth = sWidth[1]
                            if(sWidth) element.attributes.width = sWidth;
                        }
                        // var reg=/width: \s*([0-9]+)\s*px/i;
                        // var res=styling.match(reg);


                    }
                   if(!element.attributes.height){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findheight = new RegExp("\[height: \]\s*(((?!\[height: \]|\[px\]).)+)\s*\[px\]")
                            var sHeight = findheight.exec(styling)
                            sHeight = sHeight[1]
                            if(sHeight) element.attributes.width = sHeight;
                        }
                    }

                }

    }

Ответ 6

Как и решение Cedric Dugas, здесь есть патч для CKEditor, который помог мне решить эту проблему:

http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch

Я использовал его, но немного изменил код, чтобы обработать только изображения с помощью фильтра. Это решение работает, когда изображение вставлено, а также когда оно изменяется с помощью ручек в редакторе.

Надеюсь, что это поможет

Ответ 7

Для версии ckeditor 4.1 вы можете использовать следующее:

CKEDITOR.replace(textareaId,{
    allowedContent: true,
});

Будьте осторожны с этим, поскольку он, кажется, удаляет всю проверку html.