中间件编程

开发平台：

JavaScript

pkg-forms-debug.js：源码内容

* @event push
* Fires when the iframe editor is updated with content from the textarea.
* @param {HtmlEditor} this
* @param {String} html
*/
'push',
/**
* @event editmodechange
* Fires when the editor switches edit modes
* @param {HtmlEditor} this
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
*/
'editmodechange'
)
},
// private
createFontOptions : function(){
var buf = [], fs = this.fontFamilies, ff, lc;
for(var i = 0, len = fs.length; i< len; i++){
ff = fs[i];
lc = ff.toLowerCase();
buf.push(
'<option value="',lc,'" style="font-family:',ff,';"',
(this.defaultFont == lc ? ' selected="true">' : '>'),
ff,
'</option>'
);
}
return buf.join('');
},
/*
* Protected method that will not generally be called directly. It
* is called when the editor creates its toolbar. Override this method if you need to
* add custom toolbar buttons.
* @param {HtmlEditor} editor
*/
createToolbar : function(editor){
var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
function btn(id, toggle, handler){
return {
itemId : id,
cls : 'x-btn-icon',
iconCls: 'x-edit-'+id,
enableToggle:toggle !== false,
scope: editor,
handler:handler||editor.relayBtnCmd,
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
overflowText: editor.buttonTips[id].title || undefined,
tabIndex:-1
};
}
// build the toolbar
var tb = new Ext.Toolbar({
renderTo:this.wrap.dom.firstChild
});
// stop form submits
this.mon(tb.el, 'click', function(e){
e.preventDefault();
});
if(this.enableFont && !Ext.isSafari2){
this.fontSelect = tb.el.createChild({
tag:'select',
cls:'x-font-select',
html: this.createFontOptions()
});
this.mon(this.fontSelect, 'change', function(){
var font = this.fontSelect.dom.value;
this.relayCmd('fontname', font);
this.deferFocus();
}, this);
tb.add(
this.fontSelect.dom,
'-'
);
}
if(this.enableFormat){
tb.add(
btn('bold'),
btn('italic'),
btn('underline')
);
}
if(this.enableFontSize){
tb.add(
'-',
btn('increasefontsize', false, this.adjustFont),
btn('decreasefontsize', false, this.adjustFont)
);
}
if(this.enableColors){
tb.add(
'-', {
itemId:'forecolor',
cls:'x-btn-icon',
iconCls: 'x-edit-forecolor',
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
allowReselect: true,
focus: Ext.emptyFn,
value:'000000',
plain:true,
listeners: {
scope: this,
select: function(cp, color){
this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
this.deferFocus();
}
},
clickEvent:'mousedown'
})
}, {
itemId:'backcolor',
cls:'x-btn-icon',
iconCls: 'x-edit-backcolor',
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
focus: Ext.emptyFn,
value:'FFFFFF',
plain:true,
allowReselect: true,
listeners: {
scope: this,
select: function(cp, color){
if(Ext.isGecko){
this.execCmd('useCSS', false);
this.execCmd('hilitecolor', color);
this.execCmd('useCSS', true);
this.deferFocus();
}else{
this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
this.deferFocus();
}
}
},
clickEvent:'mousedown'
})
}
);
}
if(this.enableAlignments){
tb.add(
'-',
btn('justifyleft'),
btn('justifycenter'),
btn('justifyright')
);
}
if(!Ext.isSafari2){
if(this.enableLinks){
tb.add(
'-',
btn('createlink', false, this.createLink)
);
}
if(this.enableLists){
tb.add(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if(this.enableSourceEdit){
tb.add(
'-',
btn('sourceedit', true, function(btn){
this.toggleSourceEdit(!this.sourceEditMode);
})
);
}
}
this.tb = tb;
},
/**
* Protected method that will not generally be called directly. It
* is called when the editor initializes the iframe with HTML contents. Override this method if you
* want to change the initialization markup of the iframe (e.g. to add stylesheets).
*/
getDocMarkup : function(){
return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
},
// private
getEditorBody : function(){
return this.doc.body || this.doc.documentElement;
},
// private
getDoc : function(){
return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
},
// private
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},
// private
onRender : function(ct, position){
Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');
if(Ext.isIE){ // fix IE 1px bogus margin
this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
}
this.wrap = this.el.wrap({
cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
});
this.createToolbar(this);
this.disableItems(true);
// is this needed?
// this.tb.doLayout();
this.createIFrame();
if(!this.width){
var sz = this.el.getSize();
this.setSize(sz.width, this.height || sz.height);
}
},
createIFrame: function(){
var iframe = document.createElement('iframe');
iframe.name = Ext.id();
iframe.frameBorder = '0';
iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";
this.wrap.dom.appendChild(iframe);
this.iframe = iframe;
this.monitorTask = Ext.TaskMgr.start({
run: this.checkDesignMode,
scope: this,
interval:100
});
},
initFrame : function(){
Ext.TaskMgr.stop(this.monitorTask);
this.doc = this.getDoc();
this.win = this.getWin();
this.doc.open();
this.doc.write(this.getDocMarkup());
this.doc.close();
var task = { // must defer to wait for browser to be ready
run : function(){
if(this.doc.body || this.doc.readyState == 'complete'){
Ext.TaskMgr.stop(task);
this.doc.designMode="on";
this.initEditor.defer(10, this);
}
},
interval : 10,
duration:10000,
scope: this
};
Ext.TaskMgr.start(task);
},
checkDesignMode : function(){
if(this.wrap && this.wrap.dom.offsetWidth){
var doc = this.getDoc();
if(!doc){
return;
}
if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
this.initFrame();
}
}
},
disableItems: function(disabled){
if(this.fontSelect){
this.fontSelect.dom.disabled = disabled;
}
this.tb.items.each(function(item){
if(item.itemId != 'sourceedit'){
item.setDisabled(disabled);
}
});
},
// private
onResize : function(w, h){
Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
if(this.el && this.iframe){
if(typeof w == 'number'){
var aw = w - this.wrap.getFrameWidth('lr');
this.el.setWidth(this.adjustWidth('textarea', aw));
this.tb.setWidth(aw);
this.iframe.style.width = Math.max(aw, 0) + 'px';
}
if(typeof h == 'number'){
var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
this.el.setHeight(this.adjustWidth('textarea', ah));
this.iframe.style.height = Math.max(ah, 0) + 'px';
if(this.doc){
this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
}
}
}
},
/**
* Toggles the editor between standard and source edit mode.
* @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
toggleSourceEdit : function(sourceEditMode){
if(sourceEditMode === undefined){
sourceEditMode = !this.sourceEditMode;
}
this.sourceEditMode = sourceEditMode === true;
var btn = this.tb.items.get('sourceedit');
if(btn.pressed !== this.sourceEditMode){
btn.toggle(this.sourceEditMode);
if(!btn.xtbHidden){
return;
}
}
if(this.sourceEditMode){
this.disableItems(true);
this.syncValue();
this.iframe.className = 'x-hidden';
this.el.removeClass('x-hidden');
this.el.dom.removeAttribute('tabIndex');
this.el.focus();
}else{
if(this.initialized){
this.disableItems(false);
}
this.pushValue();
this.iframe.className = '';
this.el.addClass('x-hidden');
this.el.dom.setAttribute('tabIndex', -1);
this.deferFocus();
}
var lastSize = this.lastSize;
if(lastSize){
delete this.lastSize;
this.setSize(lastSize);
}
this.fireEvent('editmodechange', this, this.sourceEditMode);
},
// private used internally
createLink : function(){
var url = prompt(this.createLinkText, this.defaultLinkValue);
if(url && url != 'http:/'+'/'){
this.relayCmd('createlink', url);
}
},
// private (for BoxComponent)
adjustSize : Ext.BoxComponent.prototype.adjustSize,
// private (for BoxComponent)
getResizeEl : function(){
return this.wrap;
},
// private (for BoxComponent)
getPositionEl : function(){
return this.wrap;
},
// private
initEvents : function(){
this.originalValue = this.getValue();
},
/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
markInvalid : Ext.emptyFn,
/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
clearInvalid : Ext.emptyFn,
// docs inherit from Field
setValue : function(v){
Ext.form.HtmlEditor.superclass.setValue.call(this, v);
this.pushValue();
return this;
},
/**
* Protected method that will not generally be called directly. If you need/want
* custom HTML cleanup, this is the method you should override.
* @param {String} html The HTML to be cleaned
* @return {String} The cleaned HTML
*/
cleanHtml : function(html){
html = String(html);
if(html.length > 5){
if(Ext.isWebKit){ // strip safari nonsense
html = html.replace(/sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
}
}
if(html == this.defaultValue){
html = '';
}
return html;
},
/**
* Protected method that will not generally be called directly. Syncs the contents
* of the editor iframe with the textarea.
*/
syncValue : function(){
if(this.initialized){
var bd = this.getEditorBody();
var html = bd.innerHTML;
if(Ext.isWebKit){
var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
var m = bs.match(/text-align:(.*?);/i);
if(m && m[1]){
html = '<div style="'+m[0]+'">' + html + '</div>';
}
}
html = this.cleanHtml(html);
if(this.fireEvent('beforesync', this, html) !== false){
this.el.dom.value = html;
this.fireEvent('sync', this, html);
}
}
},
//docs inherit from Field
getValue : function() {
this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
return Ext.form.HtmlEditor.superclass.getValue.call(this);
},
/**
* Protected method that will not generally be called directly. Pushes the value of the textarea
* into the iframe editor.
*/
pushValue : function(){
if(this.initialized){
var v = this.el.dom.value;
if(!this.activated && v.length < 1){
v = this.defaultValue;
}
if(this.fireEvent('beforepush', this, v) !== false){
this.getEditorBody().innerHTML = v;
if(Ext.isGecko){
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
var d = this.doc,
mode = d.designMode.toLowerCase();
d.designMode = mode.toggle('on', 'off');
d.designMode = mode;
}
this.fireEvent('push', this, v);
}
}
},
// private
deferFocus : function(){
this.focus.defer(10, this);
},
// docs inherit from Field
focus : function(){
if(this.win && !this.sourceEditMode){
this.win.focus();
}else{
this.el.focus();
}
},
// private
initEditor : function(){
//Destroying the component during/before initEditor can cause issues.
try{
var dbody = this.getEditorBody();
var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
Ext.DomHelper.applyStyles(dbody, ss);
if(this.doc){
try{
Ext.EventManager.removeAll(this.doc);
}catch(e){}
}
this.doc = this.getDoc();
Ext.EventManager.on(this.doc, {
'mousedown': this.onEditorEvent,
'dblclick': this.onEditorEvent,
'click': this.onEditorEvent,
'keyup': this.onEditorEvent,
buffer:100,
scope: this
});
if(Ext.isGecko){
Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
}
if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
}
this.initialized = true;
this.fireEvent('initialize', this);
this.doc.editorInitialized = true;
this.pushValue();
}catch(e){}
},
// private
onDestroy : function(){
if(this.monitorTask){
Ext.TaskMgr.stop(this.monitorTask);
}
if(this.rendered){
Ext.destroy(this.tb);
if(this.wrap){
this.wrap.dom.innerHTML = '';
this.wrap.remove();
}
}
if(this.el){
this.el.removeAllListeners();
this.el.remove();
}
if(this.doc){
try{
Ext.EventManager.removeAll(this.doc);
for (var prop in this.doc){
delete this.doc[prop];
}
}catch(e){}
}
this.purgeListeners();
},
// private
onFirstFocus : function(){
this.activated = true;
this.disableItems(false);
if(Ext.isGecko){ // prevent silly gecko errors
this.win.focus();
var s = this.win.getSelection();
if(!s.focusNode || s.focusNode.nodeType != 3){