急!EXTJS自带htmleditor编辑器的问题

时间:2022-10-31 13:26:01
EXTJS自带的htmleditor编辑器有,诸如插入图片等功能吗,我从网上找不到,
如果那位高手实现了,给个demo看看

5 个解决方案

#1


自带的是没有(2.0版本之前都没有,2.02版本后我就不知道了,那个要收费) 如果要实现你得自己写或者看有没有人实现ext的图片插入

#2



是不是这里面的?
http://www.extjs.com/deploy/dev/examples/form/dynamic.html

#3


自己实现一个吧,Ext好像对这个功能不太关注!

#4


你有过这个编辑器的么? 效果怎么样?

#5



<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    new Ext.FormPanel({
        renderTo: 'form',
        defaultType: 'textfield',
        items: [{
            xtype:'htmleditor',
                fieldLabel:'some label',
                width: 650,
                height: 350,
                plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
                    popTitle: 'Image url?',
                    popMsg: 'Please insert an image URL...',
                    popWidth: 400,
                    popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
                })
            }
        ]
    });
}); 
</script>


plugin:
Ext.namespace('Ext.ux', 'Ext.ux.plugins');

Ext.ux.plugins.HtmlEditorImageInsert = function(config) {
    
    config = config || {};
    
    Ext.apply(this, config);
    
    this.init = function(htmlEditor) {
        this.editor = htmlEditor;
        this.editor.on('render', onRender, this);
    };
    
    this.imageInsertConfig = {
        popTitle: config.popTitle || 'Image URL',
        popMsg: config.popMsg || 'Please select the URL of the image you want to insert:',
        popWidth: config.popWidth || 350,
        popValue: config.popValue || ''
    }
    
    this.imageInsert = function(){
        Ext.MessageBox.show({
            title: this.imageInsertConfig.popTitle,
            msg: this.imageInsertConfig.popMsg,
            width: this.imageInsertConfig.popWidth,
            buttons: Ext.MessageBox.OKCANCEL,
            prompt: true,
            value: this.imageInsertConfig.popValue,
            scope: this,
            fn: function(btn, text){ if ( btn == 'ok' ) this.editor.relayCmd('insertimage', text); }
       });
    }
    
    function onRender() {
        if (!Ext.isSafari) {
            this.editor.tb.add({
                itemId : 'htmlEditorImage',
                cls : 'x-btn-icon x-edit-insertimage',
                enableToggle: false,
                scope: this,
                handler:function(){ this.imageInsert(); },
                clickEvent:'mousedown',
                tabIndex:-1
            });
        }
    }
    
}

#1


自带的是没有(2.0版本之前都没有,2.02版本后我就不知道了,那个要收费) 如果要实现你得自己写或者看有没有人实现ext的图片插入

#2



是不是这里面的?
http://www.extjs.com/deploy/dev/examples/form/dynamic.html

#3


自己实现一个吧,Ext好像对这个功能不太关注!

#4


你有过这个编辑器的么? 效果怎么样?

#5



<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    new Ext.FormPanel({
        renderTo: 'form',
        defaultType: 'textfield',
        items: [{
            xtype:'htmleditor',
                fieldLabel:'some label',
                width: 650,
                height: 350,
                plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
                    popTitle: 'Image url?',
                    popMsg: 'Please insert an image URL...',
                    popWidth: 400,
                    popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
                })
            }
        ]
    });
}); 
</script>


plugin:
Ext.namespace('Ext.ux', 'Ext.ux.plugins');

Ext.ux.plugins.HtmlEditorImageInsert = function(config) {
    
    config = config || {};
    
    Ext.apply(this, config);
    
    this.init = function(htmlEditor) {
        this.editor = htmlEditor;
        this.editor.on('render', onRender, this);
    };
    
    this.imageInsertConfig = {
        popTitle: config.popTitle || 'Image URL',
        popMsg: config.popMsg || 'Please select the URL of the image you want to insert:',
        popWidth: config.popWidth || 350,
        popValue: config.popValue || ''
    }
    
    this.imageInsert = function(){
        Ext.MessageBox.show({
            title: this.imageInsertConfig.popTitle,
            msg: this.imageInsertConfig.popMsg,
            width: this.imageInsertConfig.popWidth,
            buttons: Ext.MessageBox.OKCANCEL,
            prompt: true,
            value: this.imageInsertConfig.popValue,
            scope: this,
            fn: function(btn, text){ if ( btn == 'ok' ) this.editor.relayCmd('insertimage', text); }
       });
    }
    
    function onRender() {
        if (!Ext.isSafari) {
            this.editor.tb.add({
                itemId : 'htmlEditorImage',
                cls : 'x-btn-icon x-edit-insertimage',
                enableToggle: false,
                scope: this,
                handler:function(){ this.imageInsert(); },
                clickEvent:'mousedown',
                tabIndex:-1
            });
        }
    }
    
}