CKEditor: настраиваемый HTML при вставке изображения

Question

Я использую CKEditor 3.5 для обеспечения редактирования WYSYWYG на веб-сайте. При вставке изображения вы можете указать ширину и высоту изображения, что приводит к HTML следующим образом:

<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />

Так как это приводит к изменению размера в браузере и в других местах на том же веб-сайте, который я использую Модуль изменения размера изображения Натанаэля Джонса , я хотел бы получить следующий вывод:

<img alt="" src="Images/Sample.png?width=62&height=30" />

Существует ли простой способ управления сгенерированным HTML или мне действительно нужно написать собственный диалог / плагин для CKEditor?

EDIT:

Добавление следующих строк в config.js было решением, которое в итоге сработало для меня:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    var editor = ev.editor;

    if (dialogName == 'image') {
        dialogDefinition.onOk = function (e) {
            var imageSrcUrl = e.sender.originalElement.$.src;
            var width = e.sender.originalElement.$.width;
            var height = e.sender.originalElement.$.height;
            var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
            editor.insertElement(imgHtml);
        };
    }
});

Следующая проблема заключается в том, что при редактировании изображения ширина и высота, естественно, находятся в поле URL и отсутствуют в выделенных полях для ширины и высоты. Поэтому мне нужно найти решение для обратного ...: -)

Answer 1

У меня была такая же проблема, мне нужно было удалить эти атрибуты из сгенерированного HTML для изображения, поэтому я переопределил метод onOK загрузчика и вставил элемент изображения вручную с помощью API CKEditor как это:

   CKEDITOR.on('dialogDefinition', function(ev) {
        // Take the dialog name and its definition from the event data
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var editor = ev.editor;
        if (dialogName == 'image') {
           dialogDefinition.onOk = function(e) {
              var imageSrcUrl = e.sender.originalElement.$.src;
              var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
              editor.insertElement(imgHtml);
           };
        }
  }

Это сработало для нас до сих пор.

Answer 2

Посмотрите на образец "output html", вы можете найти там код, который изменяет размеры изображений со стилей на атрибуты, так что вы можете настроить его для перезаписи URL.

Answer 3

У меня недостаточно очков, чтобы прокомментировать предыдущий ответ. но в отношении вашей ошибки: CKEDITOR.currentInstance возвращает неопределенное значение.

Это странно, потому что CKEDITOR глобален, но вам не нужно прибегать к этому.

При вызове функции OK у вас есть доступ к «редактору», вам не нужно получать экземпляр.

просто предложение.

Answer 4

Лучше всего было бы «воссоздать» поведение поля src (и, возможно, стиля). Я сделал что-то подобное. (но не так сложно)

Начните с исходного кода (из plugins / dialog / image.js) и создайте логику установки и фиксации, которая производит (и анализирует) разметку, которую вы ищете.

Затем во время определения диалога

1. Удалить оригиналы
2. Добавьте свои "пользовательские" поля

Поле стиля не определено, возможно, просто оставьте его в диалоговом окне, но заглушите его логику коммита.

Я добавил свое поле в диалог ...

var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
    type : 'text',
    label : 'Name',
    id : 'linkId',
    setup : function( type, element ) {
        //if ( type == IMAGE )
            this.setValue( element.getAttribute( 'id' ) );
    },
    commit : function( type, element ) {
        //if ( type == IMAGE ) {
            if ( this.getValue() || this.isChanged() )
            element.setAttribute( 'id', this.getValue() );
        //}
    }   
};

Проблемы, с которыми я столкнулся.

1. Новые поля добавляются в конец Диалог.
2. кусочки оригинального кода (введите == ИЗОБРАЖЕНИЕ) недопустимо (люблю знать, почему, но чувствовал себя комфортно, было безопасно комментировать для меня)

Вы можете столкнуться с проблемами с правилами разметки, которые отменяют вашу тяжелую работу, но совет "output html" sample "должен помочь вам решить эту проблему.