📄 iblogeditorcom.js
字号:
/**
* pLogEditor.js
*
* Non-wysiwyg javascript-based editor for textarea controls in browsers. It works in
* exactly the same as HTMLArea control but instead of graphically showing the contents
* of the post, works based on raw html code. It does not offer as many features as
* htmlarea but it does offer some other things as customizable toolbars, support
* for text selections and ranges, etc. It should work in every major browser with
* some support for DOM and DHTML.
* It is very loosely based on Alex King's js_quicktags.js which is also used in Wordpress.
* However, js_quicktags has the limitation that it can only work with one textarea per page
* and plog for example needs two in the "new post" page. The code is javascript with OOP
* so it might look a bit weird at first...
* This code is licensed under the terms of the GPL license.
*
* -- Installation and usage --
*
* Place this file somewhere in your web server tree and from your html files, call it like
* <html>
* <head>
* <link rel="stylesheet" href="plogeditor.css" type="text/css">
* <script type="text/javascript" src="plogeditor.js"></script>
* <script type="text/javascript">
* // define where your images are...
* var baseImageFolder='/devel/js/editor/images';
* </script>
* </head>
* <body>
* <h1>pLogEditor Javascript Sample</h1>
* <form name="textEditor" id="textEditor">
* text1:<br/>
* <script type="text/javascript">ed1 = new pLogEditor('text1', 'ed1');</script>
* <textarea id="text1" name="text1" rows="8" cols="60"></textarea>
* <br/>text2:<br/>
* <script type="text/javascript">ed2 = new pLogEditor('text2', 'ed2');</script>
* <textarea id="text2" name="text1" rows="8" cols="60"></textarea>
* </form>
* </body>
* </html>
*
* Create a new pLogEditor object in the place where you would like to show the
* toolbar of the editor. The first paramter for the constructor is the value of the 'id'
* attribute of the textarea that will be the content area for the toolbar. The second parameter
* is the name of the object itself, so if you are creating an editor called 'myEditor', the second
* parameter will be 'myEditor'
*
* Please set the value of baseImageFolder to the base path where your icons are stored.
*/
/**
* please change this if your icons are somewhere else!
*/
var baseImageFolder = '/js/editor/images/';
/**
* represents a button from our toolbar
*
* @param id
* @param display
* @param tagStart
* @param tagEnd
* @param icon
* @param open
*/
edButton = function(id, display, tagStart, tagEnd, icon, open)
{
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.open = open; // set to -1 if tag does not need to be closed
this.isOpen = false;
this.icon = icon;
this.htmlId = '';
this.currentStatus = 'normalButton';
/**
* renders the button
*
* @param txtId
* @return nothing
*/
this.show = function(txtId, objName)
{
// a very simple document.write...
this.htmlId = txtId + '_' + this.id;
var buttonText = '<img src="'+baseImageFolder+'/'+this.icon+'" id="' + txtId + '_' + this.id + '" class="normalButton" onmouseout="'+objName+'.mouseOut(\'' + txtId + '\', \'' + this.id + '\');" onmouseover="'+objName+'.mouseOver(\'' + txtId + '\', \'' + this.id + '\');" onclick="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', null );" alt = "' + this.display + '" />';
return(buttonText);
}
/**
* returns the html element to which this button is associated
*
* @return an html element
*/
this.getHtmlButton = function()
{
return document.getElementById( this.htmlId );
}
/**
* whether this button needs to be closed or not
*
* @return True whether it needs to be closed or false otherwise
*/
this.needsClose = function()
{
return( this.open != -1 );
}
/**
* handler for the onMouseOver event, changes the colour of the borders
*/
this.mouseOver = function()
{
htmlButton = this.getHtmlButton();
htmlButton.className = 'buttonHover';
}
/**
* handler for the onMouseOut event, returns the button to its original state
*/
this.mouseOut = function()
{
htmlButton = htmlButton = this.getHtmlButton();
htmlButton.className = this.currentStatus;
}
/**
* checks/unchecks the button
*/
this.toggle = function()
{
htmlButton = this.getHtmlButton();
// change its class and save it for later use...
if( this.currentStatus == 'pressedButton' )
this.currentStatus = 'normalButton';
else
this.currentStatus = 'pressedButton';
htmlButton.className = this.currentStatus;
}
/**
* performs the button's action
*
* @param txtId
* @return nothing
*/
this.execute = function( txtId, param )
{
var text = '';
// check if the tag needs a closing tag
if( this.open == -1 ) {
// it doesnt...
text = this.tagStart + this.tagEnd;
}
else {
// it does...
if( this.isOpen )
text = this.tagEnd;
else
text = this.tagStart + this.tagEnd;
// change the status of the button
this.isOpen = !this.isOpen;
}
// change the look of the button
if( this.open != -1 ) {
this.toggle();
}
// return the text to be added
return text;
}
/**
* special callback function that is executed when the main editor would like to
* surround the current selection in the browser
*
* @param txtId the textarea id
*/
this.surround = function( txtId, param )
{
surroundInfo = Array()
surroundInfo['start'] = this.tagStart;
surroundInfo['end'] = this.tagEnd;
return surroundInfo;
}
this.toString = function()
{
objSignature = this.id + ' Button';
return( objSignature );
}
}
/**
* visual separators for the toolbar are also implemented as buttons, but they do
* do nothing and only show a vertical bar anyway with some margin on both sides...
*/
edButtonSeparator = function()
{
this.prototype = new edButton('separator', '', '', '', '', -1 );
this.prototype.constructor = edButton;
this.superclass = edButton;
this.superclass('separator', '', '', '', '', -1 );
/**
* draws a vertical line
*/
this.show = function( txtId, objName )
{
separatorCode = '<span class="separator"></span>';
return( separatorCode );
}
}
/**
* special button that only adds a link
*
* @param id
* @param display
* @param icon
*/
edButtonLink = function(id, display, icon)
{
//
// strange javascript thingies used for object inheritance...
//
this.prototype = new edButton(id, display, '', '', icon, -1 );
this.prototype.constructor = edButton;
this.superclass = edButton;
this.superclass(id, display, '', '', icon, -1 );
/**
* function redefined from above so that users can type links
*
* @param txtId
*/
this.execute = function( txtId, param )
{
this.toggle();
linkText = prompt('Enter the link text: ');
if( linkText == null ) {
this.toggle();
return '';
}
linkDest = prompt('Enter the destination for the link (including the http://): ');
if( linkDest == null ) {
this.toggle();
return '';
}
this.toggle();
// if everything went fine, add the link and return
var linkTag = '<a href="' + linkDest + '">' + linkDest + '</a>';
return linkTag;
}
/**
* special behaviour for this function... It will only ask for the link destination
* and surround the current selection with the user's input
*
* @param txtId
*/
this.surround = function( txtId, param )
{
surroundInfo = Array();
surroundInfo['start'] = '';
surroundInfo['end'] = '';
this.toggle();
linkDest = prompt('Enter the destination for the link:');
if( linkDest == null ) {
this.toggle();
return surroundInfo;
}
surroundInfo['start'] = '<a href="' + linkDest + '">';
surroundInfo['end'] = '</a>';
this.toggle();
return surroundInfo;
}
}
/**
* special button that only adds a link
*
* @param id
* @param display
* @param icon
*/
edButtonBr = function(id, display, icon)
{
//
// strange javascript thingies used for object inheritance...
//
this.prototype = new edButton(id, display, '', '', icon, -1 );
this.prototype.constructor = edButton;
this.superclass = edButton;
this.superclass(id, display, '<br />', '', icon, -1 );
/**
* special behaviour for this function... It will only ask for the link destination
* and surround the current selection with the user's input
*
* @param txtId
*/
this.surround = function( txtId, param )
{
surroundInfo = Array();
surroundInfo['start'] = '<p>';
surroundInfo['end'] = '</p>';
this.toggle();
return surroundInfo;
}
}
/**
* special button that only adds an image
*
* @param id
* @param display
* @param icon
*/
edButtonImage = function(id, display, icon)
{
//
// strange javascript thingies used for object inheritance...
//
this.prototype = new edButton(id, display, '', '', icon, -1 );
this.prototype.constructor = edButton;
this.superclass = edButton;
this.superclass(id, display, '', '', icon, -1 );
/**
* reimplemented from edButton so that we can ask for an image url and a description
*
* @param txtId
*/
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -