扩充extjs的htmleditor实现图片插入-HTML教程-爱易网页

扩充extjs的htmleditor实现图片插入

日期：2014-05-17　浏览次数：20739 次

扩展extjs的htmleditor实现图片插入

customer.js

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  
            });  
        }  
    }  
}

页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs2.3/ext-all.js"></script>
		<script type="text/javascript" src="customer.js" ></script>
			
		<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>
	
	</head>

	<body>
		<div id="form"></div>
	</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

扩充extjs的htmleditor实现图片插入

相关资料更多>

推荐阅读更多>