ExtJsを拡張するエディタ(HtmlEditor):写真を挿入します.

Extに内蔵されているエディタの機能は相対的にまだ弱いです.たとえば、画像を挿入したり、ファイル管理をしたりします.これらはありません.テーブルの編集も弱いです.私は怠け者です.(ほとんどのプログラマは怠け者だと信じています.)幸いExtjs公式フォーラムはあまりにも強大で、基本的には求必応です.      つまり、私はHtmlEditorを拡張して写真機能の招待状を挿入しました.コードには多くの問題があります.一部の修正をしました.これは正常です.現在はurl画像を簡単に挿入しただけです.後で機能を拡張します.アップロードのファイル管理なども含まれます.でも、これは全部後の話です.以下はコードと使い方です.

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>