在ExtJS 4中修改HtmlEditor的内容 [英] Catch change in content of HtmlEditor in ExtJS 4

问题描述

我想捕获每当用户更改ExtJS 4中的HtmlEditor的内容时，我已尝试同步，更改和推送事件，而没有成功。同步似乎在焦点获得时被触发，变化不会被触发，我不知道是什么原因推动被触发。

I want to capture whenever the user changes the content of an HtmlEditor in ExtJS 4. I have tried the sync, change, and push events all with no success. Sync seems to be fired whenever focus is gained, change isn't fired, and I can't tell what causes push to be fired.

有谁能告诉哪个事件是当用户更改HtmlEditor的内容时触发？

Can anyone tell which event is fired when the user changes the content of an HtmlEditor?

感谢

编辑：
我有尝试以下代码对我来说无效，任何想法？

I have tried the following code which does not work for me, any ideas?

init: function() {
    this.control({
        'htmleditor[name="reportHtmlEditor"]': {
            render: this.addKeyHandler
        }
    });
},

addKeyHandler: function(field) {
    // This gets called fine on the component render
    var el = field.textareaEl;
    if (Ext.isGecko) {
        el.on('keypress',
        function() {
            // Do Stuff, which never gets called
        }, this, { buffer: 100});
    }
    if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
        el.on('keydown',
        function() {
            // Do Stuff, which never gets called
        }, this, { buffer: 100});
    }
},

有关更多信息，我正在使用Firefox测试这个，我从获得其他信息这个的帖子。

For some more information, I am using Firefox to test this, and I got the other information from this post.

推荐答案

它似乎有用于编辑源的textarea。这个字段与html中的任何其他字段一样，只有在模糊（HtmlEditor似乎依赖于此事件）之后才会启动更改事件。您应该可以绑定到其他事件，例如 keydown ，然后根据按键，触发适当的事件。您可以在渲染处理程序中执行此操作：

It looks like there is textarea used for editing source. This field, like any other in html, fires change event only after blur (HtmlEditor seems to rely on this event). You should probably bind to other event eg keydown and then depending on key pressed, fire appropriate event. You can do it in render handler:

{
    xtype: 'htmleditor',
    listeners: {
        render: function(){
            this.textareaEl.on('keydown', function() {
                this.fireEvent('sync', this, this.textareaEl.getValue());
            }, this, { buffer: 500 });
        },
        sync: function(sender, html){
            debugger;
        }
    }
}

这篇关于在ExtJS 4中修改HtmlEditor的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！