扩展 ExtJs的编辑器(HtmlEditor):插入图片

       Ext内置的编辑器功能相对还是很弱，例如插入图片，文件管理，这些都没有，表格编辑也很弱。我是个懒人(相信大多数程序员都是懒人)幸好Extjs官方 论坛实在是太强大了，基本上是有求必应啊，社区氛围很好，貌似Ext官方有专门的团队来回复社区的问题。
      总之我就找到了扩展HtmlEditor插入图片功能的帖子,里面的代码有很多问题，我做了一些修改，算是正常了，目前只是简单的插入url图片，稍后我 会扩展一个功能全面的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() {
        var range;
        if(Ext.isIE)
            range=this.editor.doc.selection.createRange();
        var msg=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') {
                    if(Ext.isIE)
                        range.select();
                    this.editor.relayCmd('insertimage',text);
                }
            }
        });
        var win=msg.getDialog()
        win.show.defer(200,win)
    }

	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',
				tooltip : config.buttonTip || 
				{
					title : '插入图片',
					text : '插入图片到编辑器',
					cls : 'x-html-editor-tip'
				},
				tabIndex :- 1
			});
		}
	}
}

 使用方法：

<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>

 

评论

2 楼 Fangrn 2012-06-30  

我这个是在2，3上面测试使用的

1 楼 小汤姆 2012-06-14  

没有用啊，浏览器报错：

htmleditor.js:47Uncaught TypeError: Object [object Object] has no method 'add'

我用的是Ext JS4