fckplugin.js

开源一个类似与豆瓣网站的系统 一个很不错的系统值得去学习

/*
 * FCKeditor - The text editor for internet
 * Copyright (C) 2003-2006 Frederico Caldeira Knabben
 * 
 * Licensed under the terms of the GNU Lesser General Public License:
 * 		http://www.opensource.org/licenses/lgpl-license.php
 * 
 * For further information visit:
 * 		http://www.fckeditor.net/
 * 
 * "Support Open Source software. What about a donation today?"
 * 
 * File Name: fckplugin.js
 * 	Plugin to insert "wulists" in the editor.
 * 
 * File Authors:
 * 		Frederico Caldeira Knabben ([e-mail])、
 *      Modified by EasyChen to use in WebUp system. 
 */

// Register the related command.
// 注册wulist命令
FCKCommands.RegisterCommand( 'wulist', new FCKDialogCommand( 'wulist', 'WebMagiK Quote List', FCKPlugins.Items['wulist'].Path + 'fck_wulist.php', 300, 400 ) ) ;

// 创建wulist的按钮
var owulistItem = new FCKToolbarButton( 'wulist', FCKLang.wulistBtn ) ;
owulistItem.IconPath = FCKPlugins.Items['wulist'].Path + 'wulist.gif' ;

// 向工具栏注册按钮 
FCKToolbarItems.RegisterItem( 'wulist', owulistItem ) ;


// The object used for all wulist operations.
// 创建list对象 - 注意这是个列表
var FCKwulists = new Object() ;

// Add a new wulist at the actual selection.
// 添加一个新的wulist

FCKwulists.Add = function( name )
{
	var oSpan = FCK.CreateElement( 'DIV' ) ;
	this.SetupSpan( oSpan, name ) ;
}


FCKwulists.AddWord = function( txt )
{
	FCK.InsertHtml( '(((' + txt + ')))' );
}

// SetupSpan负责对span进行渲染
FCKwulists.SetupSpan = function( span, name )
{
	span.innerHTML = '[[[ ' + name + ' ]]]' ;

	span.style.margin = "2px";
	span.style.padding = "2px";
	span.style.backgroundColor = '#ffff00' ;
	span.style.color = '#000000' ;
	span.style.border= '1px solid #E8E8E8';

	if ( FCKBrowserInfo.IsGecko )
		span.style.cursor = 'default' ;

	span._fckwulist = name ;
	
	// 不可编辑
	span.contentEditable = false ;

	// To avoid it to be resized.
	// 防止形状调整
	span.onresizestart = function()
	{
		FCK.EditorWindow.event.returnValue = false ;
		return false ;
	}
}

// On Gecko we must do this trick so the user select all the SPAN when clicking on it.
// 在Gecko我们必须做如下处理，这样当用户点击时可以选中他们。
FCKwulists._SetupClickListener = function()
{
	FCKwulists._ClickListener = function( e )
	{
		if ( e.target.tagName == 'DIV' && e.target._fckwulist )
			FCKSelection.SelectNode( e.target ) ;
	}

	FCK.EditorDocument.addEventListener( 'click', FCKwulists._ClickListener, true ) ;
}

// Open the wulist dialog on double click.
// 当双击时打开wulist的对话框
FCKwulists.OnDoubleClick = function( span )
{
	if ( span.tagName == 'DIV' && span._fckwulist )
		FCKCommands.GetCommand( 'wulist' ).Execute() ;
}
// 注册双击事件句柄
FCK.RegisterDoubleClickHandler( FCKwulists.OnDoubleClick, 'DIV' ) ;

// Check if a wulist name is already in use.
// 检查是否已经在使用
FCKwulists.Exist = function( name )
{
	var aSpans = FCK.EditorDocument.getElementsByTagName( 'DIV' )

	for ( var i = 0 ; i < aSpans.length ; i++ )
	{
		if ( aSpans[i]._fckwulist == name )
			return true ;
	}
}

if ( FCKBrowserInfo.IsIE )
{
	FCKwulists.Redraw = function()
	{
		var aWulists = FCK.EditorDocument.body.innerText.match( /\[\[\[[^\[\]]+\]\]\]/g ) ;
		if ( !aWulists )
			return ;

		var oRange = FCK.EditorDocument.body.createTextRange() ;

		for ( var i = 0 ; i < aWulists.length ; i++ )
		{
			if ( oRange.findText( aWulists[i] ) )
			{
				var sName = aWulists[i].match( /\[\[\[\s*([^\]]*?)\s*\]\]\]/ )[1] ;
				oRange.pasteHTML( '<div style="border:1px solid #E8E8E8;margin:2px;padding:2px;color: #000000; background-color: #ffff00" contenteditable="false" _fckwulist="' + sName + '">' + aWulists[i] + '</div>' ) ;
			}
		}
	}
}
else
{
	FCKwulists.Redraw = function()
	{
		var oInteractor = FCK.EditorDocument.createTreeWalker( FCK.EditorDocument.body, NodeFilter.SHOW_TEXT, FCKwulists._AcceptNode, true ) ;

		var	aNodes = new Array() ;

		while ( oNode = oInteractor.nextNode() )
		{
			aNodes[ aNodes.length ] = oNode ;
		}

		for ( var n = 0 ; n < aNodes.length ; n++ )
		{
			var aPieces = aNodes[n].nodeValue.split( /(\[\[\[[^\[\]]+\]\]\])/g ) ;

			for ( var i = 0 ; i < aPieces.length ; i++ )
			{
				if ( aPieces[i].length > 0 )
				{
					if ( aPieces[i].indexOf( '[[' ) == 0 )
					{
						var sName = aPieces[i].match( /\[\[\[\s*([^\]]*?)\s*\]\]\]/ )[1] ;

						var oSpan = FCK.EditorDocument.createElement( 'div' ) ;
						FCKwulists.SetupSpan( oSpan, sName ) ;

						aNodes[n].parentNode.insertBefore( oSpan, aNodes[n] ) ;
					}
					else
						aNodes[n].parentNode.insertBefore( FCK.EditorDocument.createTextNode( aPieces[i] ) , aNodes[n] ) ;
				}
			}

			aNodes[n].parentNode.removeChild( aNodes[n] ) ;
		}
		
		FCKwulists._SetupClickListener() ;
	}

	FCKwulists._AcceptNode = function( node )
	{
		if ( /\[\[[^\[\]]+\]\]/.test( node.nodeValue ) )
			return NodeFilter.FILTER_ACCEPT ;
		else
			return NodeFilter.FILTER_SKIP ;
	}
}

FCK.Events.AttachEvent( 'OnAfterSetHTML', FCKwulists.Redraw ) ;

// We must process the SPAN tags to replace then with the real resulting value of the wulist.
// 我们必须在真正保存结果的时候替换掉span标记
FCKXHtml.TagProcessors['div'] = function( node, htmlNode )
{
	if ( htmlNode._fckwulist )
		node = FCKXHtml.XML.createTextNode( '[[[' + htmlNode._fckwulist + ']]]' ) ;
	else
		FCKXHtml._AppendChildNodes( node, htmlNode, false ) ;

	return node ;
}