ExtJS：启动HtmlEditor默认来源

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

我试过拨打toggleSourceEdit（），根据ExtJS文档，没有成功。调试，我发现编辑器对象的sourceEditMode属性设置为true，并且Source Edit按钮看起来好像是“按下”，但点击它并不呈现键入的HTML，并再次单击它到源模式。

我已经打过电话toggleSourceEdit（）后的容器秀（）方法，容器afterLayout监听器和编辑器一个AfterRender听众。我试过在另一个按钮上调用它，我添加到容器中。每次尝试的结果都是一样的。

我看到的唯一的其他选择是将ExtJS更新为3.3.0，但我在更新日志中没有看到任何相关内容。无论哪种方式，这将是我的下一步。 编辑：该应用程序更新时有另一个问题，我们会做更大的努力，稍后更新。截至目前，我们正在使用HtmlEditor的原始设置。

谢谢！

来源

2010-10-13 Wilerson

而是调用toggleSourceEdit（），尽量设置的配置，同时创建HTML编辑对象

来源

2010-10-19 10:14:20 Madhu

感谢您的建议，但也没有工作。 – Wilerson 2010-10-22 19:26:23

碰到了同样的问题（使用3.3.0的方式）

的好运气偶然发现了一个修补程序。我不知道这是为什么，但第二次是魅力。呼叫它连续两次以达到理想的效果。

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

希望有帮助！

来源

2010-11-27 00:57:18 mundizzle

你是怎么偶然发现的！也适用于我。 – mozgras 2012-09-01 19:41:20

使用toggleSourceEdit()对我造成了一些问题。一个是，这似乎把编辑器放在源编辑和所见即所得模式之间的某处，除非我使用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(); 
    } 
    } 
});

来源

2015-10-29 22:20:08

htmlEditor.toggleSourceEdit(true);

一个时间应足够，如果你这样做听编辑的一个AfterRender事件。

来源

2016-07-14 18:22:14

ExtJS：启动HtmlEditor默认来源

回答

相关问题