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

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

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

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

<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 и отсутствуют в выделенных полях для ширины и высоты. Поэтому мне нужно придумать решение для обратного...: -)

Ответы

Ответ 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);
           };
        }
  }

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

Ответ 2

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

Ответ 3

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

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

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

  • Удалить оригиналы
  • Добавьте свои "настраиваемые" поля

Неверное поле стиля, возможно, просто оставьте его в диалоговом окне, но оставьте его логикой фиксации.

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

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() );
        //}
    }   
};

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

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

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

Ответ 4

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

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

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

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