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

Question

Как запретить CKEDITOR добавлять размеры изображения в качестве стиля?

Вместо этого:

<img src="image.jpg" style="height:100px; width:100px;">

Я хочу это

<img src="image.jpg" height="100px" width="100px">

Answer 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;
            }
        }
    });
});

Answer 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]';

Answer 3

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

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

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

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

Итак, я получил источник плагинов / image / dialogs / 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-й ссылке выше.

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

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

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

Заменить строки 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 );

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

Answer 4

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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;
                        }
                    }

                }

    }

Answer 7

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

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

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