ExtJS: запуск HtmlEditor по умолчанию для источника - PullRequest
Новая
       26

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

2 голосов
/ 14 октября 2010

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

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

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

Единственный другой вариант, который я вижу, - это обновление ExtJS до 3.3.0, но я не вижу ничего связанного с журналами изменений.В любом случае, это будет мой следующий шаг. РЕДАКТИРОВАТЬ: У приложения возникли другие проблемы при обновлении, мы приложим больше усилий для обновления позже.На данный момент мы используем HtmlEditor в его первоначальной настройке.

Спасибо!

Ответы [ 4 ]

2 голосов
/ 27 ноября 2010

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

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

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

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

0 голосов
/ 14 июля 2016 
htmlEditor.toggleSourceEdit(true);

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

0 голосов
/ 30 октября 2015

Использование 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();
    }
  }
});
0 голосов
/ 19 октября 2010

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

...