📄 bs_wysiwygnew.class.js_
字号:
* @access public
* @var int maxWidth
* @see var this.mayResize
*/
this.maxWidth;
/**
* max height of the editor window. not specified = no limit.
* @access public
* @var int maxWidth
* @see var this.mayResize
*/
this.maxHeight;
/**
* @access public
* @var array buttonsWysiwyg
* @see this.loadButtonsWysiwyg()
*/
this.buttonsWysiwyg;
/**
* @access public
* @var array buttonsHtml
* @see this.loadButtonsText()
*/
this.buttonsHtml;
/**
* @access public
* @var array buttonsText
* @see this.loadButtonsText()
*/
this.buttonsText;
/**
* array holding all the information about attached events.
* the structure can be like these:
*
* 1) attach a function directly
* syntax: _attachedEvents['eventName'] = yourFunctionName;
* 2) attach some javascript code
* syntax: _attachedEvents['eventName'] = "yourCode();";
* example: _attachedEvents['eventName'] = "alert('hi'); callSomething('foo');";
* just keep in mind that you cannot use vars in that code, because when it
* gets executed that will be another scope (unless the vars are global...)
* 3) attach multiple things for the same event
* syntax: _attachedEvents['eventName'] = new Array;
* _attachedEvents['eventName'][0] = yourFunctionName;
* _attachedEvents['eventName'][1] = "yourCode();";
*
* @access private
* @var array _attachedEvents (hash, see above)
* @see this.attachEvent();
*/
this._attachedEvents;
/**
* attaches an event.
*
* editStart
* editEnd
* editBlur
* toolbarClose
* editareaMouseOver
* editareaMouseOut
*
* @access public
* @param string trigger
* @param mixed yourEvent (string (of code) or function)
* @return void
* @see var this._attachedEvents
*/
this.attachEvent = function(trigger, yourEvent) {
if (typeof(this._attachedEvents) == 'undefined') {
this._attachedEvents = new Array();
}
if (typeof(this._attachedEvents[trigger]) == 'undefined') {
this._attachedEvents[trigger] = new Array(yourEvent);
} else {
this._attachedEvents[trigger][this._attachedEvents[trigger].length] = yourEvent;
}
}
/**
* tells if an event is attached for the trigger specified.
* @access public
* @param string trigger
* @return bool
*/
this.hasEventAttached = function(trigger) {
return (this._attachedEvents && this._attachedEvents[trigger]);
}
/**
* fires the events for the trigger specified.
* @access public (used internally but feel free to trigger events yourself...)
* @param string trigger (for example 'onClickCaption')
* @return void
*/
this.fireEvent = function(trigger) {
if (this._attachedEvents && this._attachedEvents[trigger]) {
var e = this._attachedEvents[trigger];
if ((typeof(e) == 'string') || (typeof(e) == 'function')) {
e = new Array(e);
}
for (var i=0; i<e.length; i++) {
if (typeof(e[i]) == 'function') {
e[i](this);
} else if (typeof(e[i]) == 'string') {
//alert(e[i]); //4debug
eval(e[i]);
} //else murphy
}
}
}
/**
* toggles the visibility of the toolbar.
* access public
* @param bool hide
* @see drawAsToolbar()
* @return bool (success or not)
*/
this.toggleToolbar = function(hide) {
var toolbarDiv = document.getElementById(this._objectName + '_outerDiv');
if (bs_isNull(toolbarDiv)) return false;
toolbarDiv.style.display = (hide) ? 'none' : 'block';
}
/**
*
*/
this.toolbarButtonUndo = function() {
this.toggleToolbar(true);
}
/**
*
*/
this.toolbarButtonSave = function() {
this.toggleToolbar(true);
}
/**
*
*/
this.toolbarButtonClose = function() {
this.toggleToolbar(true);
document.body.focus();
this.fireOnBlur(); //is called automatically, but too late, so i call it by hand too. stupid.
this.fireEvent('toolbarButtonClose');
}
/**
* renders the toolbar.
* @access public
* @param string editableAreaId
* @param bool startActivated (if it should be in edit mode after loading. default is false.)
* @return bool true on success, false on failure
* @see toggleToolbar()
*/
this.drawAsToolbar = function(editableAreaId, startActivated) {
this.style = 'toolbar';
this.wysiwygElm = document.getElementById(editableAreaId);
this.workingElm = this.wysiwygElm;
this.wysiwygDoc = document;
if (this.workingElm == null) return false;
if (startActivated) this._toolbarStartActivated = true;
//have to fetch the current value:
this._value = this.wysiwygElm.innerHTML;
bsWysiwygDivToInstanceArray[editableAreaId] = this;
this.wysiwygElm.attachEvent('onbeforedeactivate', function() { bsWysiwygEditorObdWrapper(editableAreaId); } );
this.wysiwygElm.attachEvent('onblur', function() { bsWysiwygEditorOnBlurWrapper(editableAreaId); } );
this.wysiwygElm.attachEvent('onfocus', function() { bsWysiwygEditorOnFocusWrapper(editableAreaId); } );
this.wysiwygElm.attachEvent('onmouseover', function() { bsWysiwygEditorEventWrapper('editareaMouseOver', editableAreaId); } );
this.wysiwygElm.attachEvent('onmouseout', function() { bsWysiwygEditorEventWrapper('editareaMouseOut', editableAreaId); } );
this.wysiwygElm.attachEvent('onpaste', function() { bsWysiwygEditorEventWrapper('editareaPaste', editableAreaId); } );
this.mayResize = false; //no support here yet.
var out = new Array;
var outerDivId = this._objectName + '_outerDiv'; // '_toolbarDiv'
out[out.length] = '<div id="' + outerDivId + '"';
out[out.length] = ' style="';
//out[out.length] = ' behavior:url(\'/_bsJavascript/lib/winlessmovable.htc\'); cursor:hand;';
out[out.length] = ' display:none; position:absolute; left;50; top:50; width:446;';
//don't specify the height, let it render by the browser.
// old // out[out.length] = ' height=expression(parseInt(document.getElementById(\'' + this._objectName + '_toolbarIframe\').offsetHeight) + 25 + \'px\');';
//out[out.length] = ' height=400;';
out[out.length] = ' border:1px solid gray;"';
out[out.length] = '>';
/*
out[out.length] = '<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="blue">';
out[out.length] = ' <tr>';
out[out.length] = ' <td nowrap><font face="arial" size="2" color="white"><b><nobr>BlueShoes Wysiwyg Toolbar</nobr></b></font></td>';
if (this.toolbarShowButtonUndo) out[out.length] = ' <td align="right" width="16"><img src="/_bsJavascript/components/wysiwyg/buttons/windows_undo.gif" width="16" height="14" border="0" onClick="' + this._objectName + '.toolbarButtonUndo();"></td>';
if (this.toolbarShowButtonSave) out[out.length] = ' <td align="right" width="16"><img src="/_bsJavascript/components/wysiwyg/buttons/windows_save.gif" width="16" height="14" border="0" onClick="' + this._objectName + '.toolbarButtonSave();"></td>';
if (this.toolbarShowButtonClose) out[out.length] = ' <td align="right" width="16"><img src="/_bsJavascript/components/wysiwyg/buttons/windows_close.gif" width="16" height="14" border="0" onClick="' + this._objectName + '.toolbarButtonClose();"></td>';
out[out.length] = ' </tr>';
out[out.length] = '</table>';
*/
out[out.length] = '<div ondragstart="return false;" onmousedown="bs_move_moveStart(\'' + outerDivId + '\');" id="' + this._objectName + '_titleBar" style="width:100%; padding:3px; cursor:default; background-color:#08246B; color:white; font-family:verdana,arial; font-size:12px; font-weight:bold;"><nobr>BlueShoes Wysiwyg Toolbar</nobr></div>';
out[out.length] = this._getDrawnFormField();
out[out.length] = this._getDrawnButtonBar();
out[out.length] = this._getDrawnIframe();
out[out.length] = this._drawStatusBar();
var body = document.getElementsByTagName('body').item(0);
body.insertAdjacentHTML('beforeEnd', out.join(''));
this.iframeElm = document.getElementById(this._objectName + '_iframe');
this.htmlDoc = this.iframeElm.contentWindow.document;
this._setupIframeDoc();
this._setupResizeGrip(outerDivId);
this.wysiwygElm = document.getElementById(editableAreaId);
this.workingElm = this.wysiwygElm;
this.wysiwygDoc = document;
this.workingDoc = this.wysiwygDoc;
this.htmlElm = this.htmlDoc.getElementsByTagName('body').item(0);
//var bar = document.getElementById(this._objectName + '_titleBar');
//bar.attachEvent('mousedown', moveStart);
this._afterDrawStuff(true);
return true;
}
/**
* draws the editor into the tag specified.
* @access public
* @var string tagId
* @return bool
*/
this.drawInto = function(tagId) {
var out = new Array;
var outerDivId = this._objectName + '_outerDiv';
if (this.style == 'toolbar') {
out[out.length] = '<div id="' + outerDivId + '" style="position:absolute; left;50; top:50; width:442; height:200; border:1px solid gray; background-color:white;">';
} else {
out[out.length] = '<div id="' + outerDivId + '" style="width:100%; height:100%; border:2px solid outset; background-color:white;">';
}
out[out.length] = this._getDrawnFormField();
out[out.length] = this._getDrawnButtonBar();
out[out.length] = this._getDrawnIframe(tagId);
out[out.length] = this._drawStatusBar();
out[out.length] = '</div>';
var tag = document.getElementById(tagId);
tag.innerHTML = out.join('');
this.iframeElm = document.getElementById(this._objectName + '_iframe');
this.wysiwygDoc = this.iframeElm.contentWindow.document;
this.htmlDoc = this.wysiwygDoc;
if (!moz) {
this.wysiwygDoc.designMode = "on";
//yes, i fucking have to reassign this.wysiwygDoc here in ie6. because of designMode = 'on' above.
this.wysiwygDoc = this.iframeElm.contentWindow.document;
}
this._setupIframeDoc();
this._setupResizeGrip(outerDivId);
if (moz) {
this.wysiwygDoc.designMode = "on";
}
this.wysiwygElm = this.wysiwygDoc.getElementsByTagName('body').item(0);
this.htmlElm = this.wysiwygElm;
this.workingElm = this.wysiwygElm;
this.workingDoc = this.wysiwygDoc;
this._afterDrawStuff(false);
return true;
}
/**
* @access private
* @return string
*/
this._drawStatusBar = function() {
var out = new Array;
/*
out[out.length] = '<table id="' + this._objectName + '_statusbar" width="100%" height="25" cellpadding="0" cellspacing="0" bgcolor="menu"><tr>';
out[out.length] = '<td><table><tr>';
out[out.length] = '<td class="wysiwygBaseline" style="font-family:arial,helvetica; font-size:11px;" id="toolbarHelptext"></td>';
out[out.length] = '</tr></table></td><td width="165"><table><tr>';
out[out.length] = '<td width="170" align="right" class="wysiwygBaseline" style="font-family:arial,helvetica; font-size:11px;" nowrap><nobr><a href="http://www.blueshoes.org/en/javascript/wysiwyg/" target="_blank" style="text-decoration:none; color:black;"><img src="/_bsImages/powered/blueshoes/shoe_xxs.gif" border="0"> BlueShoes Wysiwyg Editor</a> </nobr></td>';
out[out.length] = '</tr></table></td>';
out[out.length] = '</tr></table>';
*/
out[out.length] = '<div style="height:20px; background-color:menu;"> </div>';
out[out.length] = '<div id="' + this._objectName + '_statusbar" style="position:absolute; bottom:0px; right:0px; width:100%; height:20px; background-color:menu;">';
out[out.length] = '<div unselectable="On" style="z-index:5; position:absolute; display:inline; left:5px; bottom:3px; align:left; border-right:10px solid menu; background-color:menu; font-family:arial,helvetica; font-size:11px;" id="toolbarHelptext"></div>';
out[out.length] = '<div unselectable="On" style="z-index:4; position:absolute; display:inline; width:165px; right:10px; bottom:3px; align:right;" class="wysiwygBaseline"><a href="http://www.blueshoes.org/en/javascript/wysiwyg/" target="_blank" style="color:black; text-decoration:none; font-family:arial,helvetica; font-size:11px;"><img src="/_bsImages/powered/blueshoes/shoe_xxs.gif" border="0" align="top"> BlueShoes Wysiwyg Editor</a></div>';
out[out.length] = '</div>'
return out.join('');
}
/**
* @access private
* @param string tagId
* @return string
*/
this._getDrawnIframe = function(tagId) {
if (typeof(tagId) != 'undefined') {
var initIframeHeight = document.getElementById(tagId).offsetHeight - 100; //buttonbar 70 and statusbar 30
} else {
var initIframeHeight = 0; //buttonbar 70 and statusbar 30
}
return '<iframe align="top" id="' + this._objectName + '_iframe' + '" width="100%" height="' + initIframeHeight + 'px"></iframe>';
/*
out[out.length] = '<div id="' + this._objectName + '_iframe' + '"';
out[out.length] = ' style="background-color:white; border:1px gray solid; overflow:auto; width:100%;';
var fullHeight = parseInt(document.getElementById(tagId).clientHeight);
//out[out.length] = ' height:expression(' + fullHeight + ' - parseInt(document.getElementById(\'' + this._objectName + '_toolbarIframe' + '\').clientHeight) + \'px\');"';
out[out.length] = ' height=400;';
out[out.length] = ' onBeforeDeactivate="' + this._objectName + '.saveCursorPos();"';
out[out.length] = ' onBlur="' + this._objectName + '.fireOnBlur();"';
out[out.length] = ' onpaste="' + this._objectName + '._fireEditareaOnPaste();"';
out[out.length] = '>' + this._value + '</div>';
*/
}
/**
* @access private
* @return void
*/
this._setupIframeDoc = function() {
var docHead = '';
//no, it is not possible to include external files.
//mozilla uses such included scripts. ie uses nothing, but does not complain either.
//we're fine this way cause all we have to do is make innerText available in moz.
//docHead += "<script type='text/javascript' src='/_bsJavascript/core/lang/Bs_Misc.lib.js'></script>";
if (moz) {
docHead += "<script>";
docHead += ' function convertTextToHTML(s) {\n';
docHead += ' s = s.replace(/\&/g, "&")\n';
docHead += ' s = s.replace(/</g, "<")\n';
docHead += ' s = s.replace(/>/g, ">")\n';
docHead += ' s = s.replace(/\\n/g, "<BR>");\n'; //<= escaped \n here!!!
docHead += ' while (/\s\s/.test(s))\n';
docHead += ' s = s.replace(/\s\s/, " ");\n';
docHead += ' return s.replace(/\s/g, " ");\n';
docHead += ' }\n';
docHead += ' HTMLElement.prototype.__defineSetter__("innerText", function (sText) {';
docHead += ' this.innerHTML = convertTextToHTML(sText);';
docHead += ' return sText; ';
docHead += ' });';
docHead += ' var tmpGet;';
docHead += ' HTMLElement.prototype.__defineGetter__("innerText", tmpGet = function () {';
docHead += ' var r = this.ownerDocument.createRange();';
docHead += ' r.selectNodeContents(this);';
docHead += ' return r.toString();';
docHead += ' });';
docHead += "</script>\n";
}
//css works for both, lucky me. but moz only likes direct style definitions and freaks out on includes.
docHead += "<style>\n";
docHead += "body { font-family:arial,helvetica; }\n";
docHead += "</style>\n";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -