ExtJS：启动 HtmlEditor 默认为源答案

【问题标题】：ExtJS: starting HtmlEditor defaulting to sourceExtJS：启动 HtmlEditor 默认为源
【发布时间】：2010-10-13 21:35:31
【问题描述】：

我正在使用 ExtJS 3.2.1，我需要一个与捆绑的 HtmlEditor 几乎相同的组件，但有一个例外：它必须直接开始编辑 HTML 源代码。我不使用普通 TextArea 的原因是用户应该能够在提交之前预览其操作的结果。

根据 ExtJS 文档，我尝试调用 toggleSourceEdit()，但没有成功。调试，我看到编辑器对象的 sourceEditMode 属性设置为 true，Source Edit 按钮看起来好像被“按下”了，但点击它并没有呈现键入的 HTML，然后再次单击它会进入源模式。

我尝试在容器 show() 方法之后、容器 afterLayout 侦听器和编辑器上调用 toggleSourceEdit() em>afterRender 监听器。我也尝试在添加到容器中的另一个按钮上调用它。每次尝试的结果都是一样的。

我看到的唯一其他选项是将 ExtJS 更新到 3.3.0，但我似乎在更改日志上没有任何相关内容。不管怎样，这将是我的下一步。 编辑：该应用在更新时出现了另一个问题，我们稍后会努力更新。截至目前，我们在其原始设置中使用 HtmlEditor。

谢谢！

【问题讨论】：

标签： javascript extjs html-editor

【解决方案1】：

遇到了同样的问题（顺便用了3.3.0）

碰巧碰巧找到了一个修复方法。我不知道为什么会这样，但第二次是魅力。连续调用两次即可达到预期效果..

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

希望有帮助！

【讨论】：

【解决方案2】：

而不是调用 toggleSourceEdit()，尝试在创建 HtmlEditor 对象时设置配置

【讨论】：

【解决方案3】：

使用toggleSourceEdit() 给我带来了一些问题。一个是这似乎使编辑器处于源代码编辑和所见即所得模式之间的某个地方，除非我使用 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();
    }
  }
});

【讨论】：

【解决方案4】：

htmlEditor.toggleSourceEdit(true);

如果你这样做是为了听编辑器的 afterrender 事件，一次就足够了。

【讨论】：