Question

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

根据ExtJS文档，我尝试调用 toggleSourceEdit（），但没有成功。调试，我看到编辑器对象将 sourceEditMode 属性设置为 true ，并且“源编辑”按钮看起来好像是“按下”，但点击它不会渲染输入的HTML，然后再次单击它进入源模式。

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

我看到的唯一其他选项是将ExtJS更新为3.3.0，但我似乎没有任何关于更改日志的内容。无论哪种方式，这将是我的下一步。 编辑：该应用在更新时遇到了另一个问题，我们将在以后做出更大的努力来进行更新。截至目前，我们正在使用原始设置中的HtmlEditor。

谢谢！

Answer 1

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

通过愚蠢的运气偶然发现了一个问题。我不知道为什么会这样，但第二次是魅力。连续两次调用以达到预期效果。

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

希望有所帮助！

Answer 2

而是调用toggleSourceEdit（），尝试在创建HtmlEditor对象时设置配置

Answer 3

使用toggleSourceEdit()给我带来了一些问题。一个是这似乎使编辑器在源编辑和WYSIWYG模式之间处于不确定状态，除非我使用250ms左右的超时。它也把重点放在那个编辑器上，我不想在编辑器中启动表单的焦点，特别是因为它在页面下方，浏览器在打开时滚动到聚焦的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);

如果你这样做，那么听一次编辑的后续事件就足够了。

ExtJS：启动HtmlEditor默认为源

4 个答案: