扩充extjs的htmleditor实现图片插入
日期：2014-05-17 浏览次数：20829 次
扩展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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
