2

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

根据 ExtJS 文档，我尝试调用toggleSourceEdit() ，但没有成功。调试，我看到编辑器对象的sourceEditMode属性设置为true，并且 Source Edit 按钮似乎被“按下”了，但是点击它并不会呈现键入的 HTML，再次点击它会进入 Source Mode .

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

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

谢谢！

4

4 回答 4

2

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

运气不好偶然发现了一个修复。我不知道为什么会这样，但第二次是魅力。连续调用两次即可达到预期的效果..

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

希望有帮助！

于 2010-11-27T00:57:18.560 回答
0

Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object

于 2010-10-19T10:14:20.660 回答
0 
htmlEditor.toggleSourceEdit(true);

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

于 2016-07-14T18:22:14.767 回答
0

使用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();
    }
  }
});
于 2015-10-29T22:20:08.403 回答