ExtJS: запуск HtmlEditor по умолчанию для источника

Question

Я использую ExtJS 3.2.1, и мне нужен компонент, почти идентичный компоненту HtmlEditor, за одним исключением: он должен начать прямое редактирование исходного кода HTML. Причина, по которой я не использую обычный TextArea, заключается в том, что пользователь должен иметь возможность предварительного просмотра результатов своих действий перед отправкой.

Я пытался позвонить toggleSourceEdit(), согласно документации ExtJS, без успеха. Отладка, я вижу, что объект редактора имеет свойство sourceEditMode, установленное в true, а кнопка Source Edit выглядит так, как будто она была нажата, но нажатие на нее не отображает набранный HTML, а щелчок снова идет в режим источника.

Я попытался назвать toggleSourceEdit() после контейнера шоу() метода, на контейнере afterLayout слушателя и на редакторе afterRender слушателя. Я попробовал также вызвать его на другой кнопке, которую я добавил в контейнер. Результат одинаковый при каждой попытке.

Единственный другой вариант, который я вижу, - это обновление ExtJS до 3.3.0, но я не вижу ничего связанного с изменениями. В любом случае, это будет мой следующий шаг. EDIT: У приложения возникли другие проблемы при обновлении, мы приложим больше усилий для обновления позже. На данный момент мы используем HtmlEditor в исходной настройке.

Спасибо!

Answer 1

Вместо вызова toggleSourceEdit(), попытайтесь настроить конфигурацию во время создания объекта HTMLeditor

Answer 2

столкнулся с той же проблемой (используя 3.3.0, кстати)

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

HTMLEditor.toggleSourceEdit(true); 
HTMLEditor.toggleSourceEdit(true); 

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

Answer 3

Использование toggleSourceEdit() вызвало некоторые проблемы для меня. Один из них заключался в том, что это, казалось, помещало редактор где-то в неопределенности между редактированием источника и режимом WYSIWYG, если я не использовал тайм-аут в 250 мс или около того. Он также ставит фокус в этом редакторе, и я не хочу начинать фокус формы в редакторе, тем более, что он находится ниже фокуса, и браузер открывается, когда он открывается, сфокусированным редактором html.

Единственное, что сработало для меня, было расширение Ext.form.HtmlEditor, а затем перезапись toggleSourceEdit, удаление команды фокуса. Затем добавление слушателя для переключения в исходный редактор при инициализации компонента. Это для Ext 4.1 и выше. Для более старых версий замените me.updateLayout() на me.doComponentLayout().

var Namespace = { 

SourceEditor: Ext.define('Namespace.SourceEditor', { 
    extend: 'Ext.form.HtmlEditor', 
    alias: 'widget.sourceeditor', 
    initComponent: function() { 
     this.callParent(arguments); 
    }, 
    toggleSourceEdit: function (sourceEditMode) { 
     var me = this, 
      iframe = me.iframeEl, 
      textarea = me.textareaEl, 
      hiddenCls = Ext.baseCSSPrefix + 'hidden', 
      btn = me.getToolbar().getComponent('sourceedit'); 

     if (!Ext.isBoolean(sourceEditMode)) { 
      sourceEditMode = !me.sourceEditMode; 
     } 
     me.sourceEditMode = sourceEditMode; 

     if (btn.pressed !== sourceEditMode) { 
      btn.toggle(sourceEditMode); 
     } 
     if (sourceEditMode) { 
      me.disableItems(true); 
      me.syncValue(); 
      iframe.addCls(hiddenCls); 
      textarea.removeCls(hiddenCls); 
      textarea.dom.removeAttribute('tabindex'); 
      //textarea.focus(); 
      me.inputEl = textarea; 
     } else { 
      if (me.initialized) { 
       me.disableItems(me.readOnly); 
      } 
      me.pushValue(); 
      iframe.removeCls(hiddenCls); 
      textarea.addCls(hiddenCls); 
      textarea.dom.setAttribute('tabindex', -1); 
      me.deferFocus(); 
      me.inputEl = iframe; 
     } 
     me.fireEvent('editmodechange', me, sourceEditMode); 
     me.updateLayout(); 
    } 
}) 
} 

Затем, чтобы использовать его:

Ext.create('Namespace.SourceEditor', { 
    /*regular options*/ 
    listeners: { 
    initialize: function(thisEditor) { 
      thisEditor.toggleSourceEdit(); 
    } 
    } 
}); 

Answer 4

htmlEditor.toggleSourceEdit(true); 

один раз должно быть достаточно, если вы сделаете это слушать afterrender события редактора.