editor skin에 xquared 추가

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@3039 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/editor/skins/xquared/examples/css/xq_contents.css

@@ -0,0 +1,122 @@
+/* Basic */
+.xed {
+	color: #494949;
+	padding: 0.3em;
+	font-size: 0.833em;
+	font-family: Arial, dotum, sans-serif;
+}
+.xed * {
+	margin: 0;
+	padding: 0;
+}
+
+
+
+/* Headings and paragraph */
+.xed h1,
+.xed h2,
+.xed h3,
+.xed h4,
+.xed h5,
+.xed h6 {
+	border-bottom: 2px solid #425e89;
+	line-height: 1em;
+	padding-bottom: 0.2em;
+	margin: 0.2em 0;
+}
+
+.xed h1 {font-size: 2.845em;}
+.xed h2 {font-size: 2.460em;}
+.xed h3 {font-size: 2.153em;}
+.xed h4 {font-size: 1.922em;}
+.xed h5 {font-size: 1.461em;}
+.xed h6 {font-size: 1.230em;}
+
+.xed p {
+	margin: 0.614em 0;
+	line-height: 1.230em;
+}
+
+.xed hr {
+}
+
+
+
+/* List */
+.xed ul,
+.xed ol {
+	padding-left: 2em;
+	margin: 0.614em 0;
+}
+.xed li {
+	line-height: 1.306em;
+}
+
+
+
+/* Other block containers */
+.xed ol.code,
+.xed div,
+.xed blockquote {
+	margin: 1em 0;
+	padding-left: 2.460em;
+	padding-right: 1em;
+	border-width: 0 3px;
+	border-style: solid;
+	line-height: 1.306em;
+}
+.xed ol.code {
+	font-family: monospace;
+	list-style-type: none;
+	border-color: #ffb781;
+	background: url(../img/content/code.gif) no-repeat 0 0;
+}
+.xed div {
+	border-color: #8ccfff;
+	background: url(../img/content/div.gif) no-repeat 0 0;
+}
+.xed blockquote {
+	border-color: #c9c9c9;
+	background: url(../img/content/blockquote.gif) no-repeat 0 0;
+}
+
+
+
+/* Inline elements */
+.xed em.underline {
+	font-style: normal;
+	text-decoration: underline;
+}
+.xed span.strike {
+	text-decoration: line-through;
+}
+
+
+
+/* table */
+.xed table.datatable {
+	width: 100%;
+	/width: auto;
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+.xed table.datatable th {
+	font-weight: normal;
+	padding: 0.25em 0.307em;
+}
+.xed table.datatable td {
+	padding: 0.25em 0.307em;
+}
+.xed table.datatable {
+	border-left: 1px solid #000;
+	border-top: 1px solid #000;	
+}
+.xed table.datatable th {
+	background-color: #e7e7e7;
+	border-bottom: 1px solid #000;
+	border-right: 1px solid #000;	
+}
+.xed table.datatable td {
+	border-bottom: 1px solid #000;
+	border-right: 1px solid #000;	
+}

modules/editor/skins/xquared/examples/css/xq_ui.css

@@ -0,0 +1,233 @@
+/**
+ * Default Toolbar
+ */
+ .xquared {
+	border: 1px solid #c2c2c2; 
+ }
+.xquared div.toolbar {
+	position: relative;
+	background-color: #ebebeb;
+	background-position: 0 0;
+	background-repeat: repeat-x;
+	background-image: url(../img/toolbar/toolbarBg.gif);
+}
+
+.xquared ul.buttons {
+	margin: 0;
+	padding: 5px 4px 2px;
+	list-style: none;
+	border-top: 1px solid #fff;
+	border-bottom: 1px solid #fff;
+	overflow: hidden;
+	height: 100%;
+}
+.xquared ul.buttons li {
+	float: left;
+	padding-bottom: 3px;
+	background-position: 0 0;
+	background-repeat: repeat-x;
+	background-image: url(../img/toolbar/toolbarButtonBg.gif);
+}
+.xquared ul.buttons li.xq_separator {
+	padding-left: 8px;
+	margin-left: 8px; 
+	background-position: 0 0;
+	background-repeat: repeat-x;
+	background-image: url(../img/toolbar/toolbarSeparator.gif);
+}
+.xquared ul.buttons li a {
+	display: block;
+	padding: 2px;
+	font-size: 0;
+	border: 1px solid #d2d2d2;
+	margin-right: -1px;
+	position: relative;
+	height: 100%;
+	_height: auto;
+	z-index: 0;
+}
+.xquared ul.buttons li a img {
+	margin: 0;
+	padding: 0;
+	border: none;
+	font-size: 1.25em;
+}
+
+/* selected */
+.xquared ul.buttons li a.selected {
+	background-color: #ffea5f;
+	border: 1px solid #a0a0a0;
+	position: relative;
+	z-index: 1;
+}
+
+/* mouseover */
+.xquared ul.buttons li a:hover {
+	border: 1px solid #000;
+	background-color: transparent;
+	position: relative;
+	z-index: 2;
+}
+
+/* disabled */
+.xquared .disabled ul.buttons li a,
+.xquared ul.buttons li .disabled a {
+	background-color: #fff;
+	opacity: 0.3;
+	filter:alpha(opacity=30);
+	_width: 1px;
+	_height: 1px;
+	cursor: default;
+}
+.xquared .disabled ul.buttons li a,
+.xquared ul.buttons li .disabled a:hover {
+	border: 1px solid #dbdbdb;
+	position: relative;
+	z-index: 0;
+}
+.xquared .disabled ul.buttons li a,
+.xquared ul.buttons li .disabled a.selected {
+	border: 1px solid #dbdbdb;
+}
+
+.xquared .editor {
+	border: 0 none;
+	border-top:1px solid #c2c2c2;
+	height:300px;
+}
+.xquared .editor textarea,
+.xquared .editor iframe {
+	margin: 0;
+	padding: 0;
+	border: 0 none;
+	height: 100%;
+	width: 100%;
+}
+
+.xquared .editor textarea {
+	_height: expression(this.parentNode.clientHeight - 2); /* TODO remove IE6 hack */
+}
+*+html .xquared .editor textarea {
+	height: expression(this.parentNode.clientHeight - 1); /* TODO remove IE7 hack */
+}
+
+.xquared .source_editor {
+	padding-left: 0.3em;
+}
+
+
+/**
+ * Context Menu
+ */
+.xqContextMenu {
+	position:absolute;
+	z-index: 902;
+	font-size: medium;
+	font-family: arial, "돋움";
+	width:auto;
+	margin:0;
+	padding:3px;
+	border:1px solid #aaa;
+	list-style:none;
+	background-color: #fff;
+}
+.xqContextMenu li {
+	padding:2px 3px 2px 20px;
+	background-position:left;
+	background-repeat:no-repeat;
+	color:#aaa;
+	display:block;
+	width:200px;
+}
+.xqContextMenu a {
+	color:#000;
+	text-decoration:none;
+}
+.xqContextMenu .separator {
+	margin-top:5px;
+	padding-bottom:0px;
+	line-height:0em;
+	height: 1px;
+	/height: auto;
+	border-top: 1px solid #aaa;
+}
+
+
+
+/**
+ * Controls - BasicLinkDialog
+ */
+.xqFormDialog {
+	position:absolute;
+	z-index: 902;
+	border:1px solid #aaa;
+	background-color: #fff;
+	padding: 0.5em;
+	overflow:auto; /* to fix FF caret bug */
+}
+
+.xqFormDialog h3 {
+	font-size: 1.2em;
+	margin: 0;
+}
+
+/**
+ * Controls - QuickSearchDialog
+ */
+.xqQuickSearch {
+	position:absolute;
+	z-index: 902;
+	font-size: medium;
+	font-family: arial, "돋움";
+	width:15em;
+	margin:0;
+	padding:0;
+	border:1px solid #aaa;
+	list-style:none;
+	background-color: #fff;
+	overflow:auto; /* to fix FF caret bug */
+}
+
+.xqQuickSearch h1 {
+	font-size: medium;
+	font-weight: bold;
+	margin: 2px;
+	padding: 2px;
+}
+
+.xqQuickSearch .input {
+	border: 1px solid #aaa;
+	padding: 2px;
+	margin: 2px;
+}
+
+.xqQuickSearch form {
+	padding: 0;
+	margin: 0;
+}
+	
+.xqQuickSearch input {
+	border-width: 0;
+	margin: 0 2px;
+	width: 98%;
+}
+
+.xqQuickSearch ol {
+	border: 1px solid #aaa;
+	padding: 2px;
+	margin: 2px;
+	height: 10em;
+	overflow: auto;
+}
+
+.xqQuickSearch li {
+	list-style: none;
+	padding-bottom: 1px;
+	border-bottom: 1px solid #ddd;
+	cursor: pointer;
+	_cursor: hand;
+}
+
+.xqQuickSearch li.selected {
+	background-color: #ffd;
+}

modules/editor/skins/xquared/examples/default.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - Default</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"));
+		xed.setEditMode('wysiwyg');
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	//]]></script>
+</head>
+
+<body>
+	<div id="xqEditor">
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<ul>
+			<li>Item 1</li>
+			<li>Item 2</li>
+		</ul>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<ul>
+			<li>
+				<p>Item 1</p>
+				<ol>
+					<li>Item 1</li>
+					<li>Item 2</li>
+				</ol>
+			</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+		</ul>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<div>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<blockquote>
+				<p>This holds true both for individuals as well as whole tagging communities.</p>
+			</blockquote>
+		</div>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<blockquote>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<blockquote>
+				<p>This holds true both for individuals as well as whole tagging communities.</p>
+			</blockquote>
+		</blockquote>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<h2>Heading 2</h2>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<h2>Heading 2</h2>
+		<h3>Heading 3</h3>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h4>Heading 4</h4>
+		<h5>Heading 5</h5>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h6>Heading 6</h6>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<ol class="code">
+			<li>print "Hello World"</li>
+			<li>print "Hello World"</li>
+		</ol>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+	</div>
+</body>
+</html>

modules/editor/skins/xquared/examples/extensionpoint.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - Extension point</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"));
+		xed.setEditMode('wysiwyg');
+
+		xed.addShortcuts(getAdditionalShortcuts());
+		xed.addAutocorrections(getAdditionalAutocorrections());
+		xed.addAutocompletions(getAdditionalAutocompletions());
+		xed.addContextMenuHandler('test', contextMenuHandler);
+	
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	
+	function getAdditionalAutocompletions() {
+		return [
+			{
+				id:'isbn',
+				criteria: /@ISBN:\d+$/i,
+				handler: function(xed, rdom, block, wrapper, text) {
+					var isbn = text.split(":")[1]
+					var korean = isbn.indexOf("97889") == 0 || isbn.indexOf("89") == 0
+					var href = korean ?
+						"http://www.aladdin.co.kr/shop/wproduct.aspx?ISBN=" :
+						"http://www.amazon.com/exec/obidos/ISBN="
+					var node = rdom.createElement('A');
+					node.innerHTML = 'ISBN:' + isbn;
+					node.href = href + isbn;
+					node.className = 'external';
+					node.title = 'ISBN:' + isbn;
+					
+					wrapper.innerHTML = "";
+					wrapper.appendChild(node);
+				}
+			},
+			{
+				id:'anchor',
+				criteria: /@A(:(.+))?$/i,
+				handler: function(xed, rdom, block, wrapper, text) {
+					var m = text.match(/@A(:(.+))?$/i);
+					var anchorId = m[2] ? m[2] : function() {
+						var id = 0;
+						while(true) {
+							var element = rdom.$("a" + (id));
+							if(!element) return "a" + id;
+							id++;
+						}
+					}();
+					
+					var node = rdom.createElement('A');
+					node.id = anchorId;
+					node.href = '#' + anchorId;
+					node.className = 'anchor';
+					node.title = 'Anchor ' + anchorId;
+					node.innerHTML = '(' + anchorId + ')';
+					
+					wrapper.innerHTML = "";
+					wrapper.appendChild(node);
+				}
+			}
+		];
+	}
+	function getAdditionalAutocorrections() {
+		return [
+			{id:'bullet', criteria: /^(\s|\&nbsp\;)*(\*|-)(\s|\&nbsp\;).+$/, handler: function(xed, rdom, block, text) {
+				rdom.pushMarker();
+				rdom.removePlaceHoldersAndEmptyNodes(block);
+				block.innerHTML = block.innerHTML.replace(/((\s|&nbsp;)*(\*|\-)\s*)/, "");
+				if(block.nodeName == "LI") xed.handleIndent();
+				if(block.parentNode.nodeName != "UL") xed.handleList('UL');
+				rdom.popMarker(true);
+			}},
+			{id:'numbering', criteria: /^(\s|\&nbsp\;)*(\d\.|#)(\s|\&nbsp\;).+$/, handler: function(xed, rdom, block, text) {
+				rdom.pushMarker();
+				rdom.removePlaceHoldersAndEmptyNodes(block);
+				block.innerHTML = block.innerHTML.replace(/(\s|&nbsp;)*(\d\.|\#)\s*/, "")
+				if(block.nodeName == "LI") xed.handleIndent();
+				if(block.parentNode.nodeName != "OL") xed.handleList('OL');
+				rdom.popMarker(true);
+			}},
+			{id:'imageUrl', criteria: /https?:\/\/.*?\/(.*?\.(jpg|jpeg|gif|bmp|png))$/i, handler: function(xed, rdom, block, text) {
+				var fileName = text.match(/https?:\/\/.*?\/(.*?\.(jpg|jpeg|gif|bmp|png))$/i)[1];
+				block.innerHTML = "";
+				var img = rdom.createElement("img");
+				img.src = text;
+				img.alt = fileName;
+				img.title = fileName;
+				block.appendChild(img);
+				rdom.selectElement(block);
+				rdom.collapseSelection(false);
+			}},
+			{id:'separator', criteria: /^----*$/, handler: function(xed, rdom, block, text) {
+				if(rdom.tree.isBlockContainer(block)) block = rdom.wrapAllInlineOrTextNodesAs("P", block, true)[0];
+				
+				block.innerHTML = "";
+				block.appendChild(rdom.createElement("HR"));
+				rdom.selectElement(block);
+				rdom.collapseSelection();
+			}},
+			{id:'heading', criteria: /^\=+[^=]*\=+(\&nbsp;)*$/, handler: function(xed, rdom, block, text) {
+				var textWithoutEqualMarks = text.strip().replace(/=/g, "");
+				var level = Math.min(6, parseInt((text.length - textWithoutEqualMarks.length) / 2))
+				xed.handleApplyBlock('H' + level);
+				block = rdom.getCurrentBlockElement();
+				block.innerHTML = textWithoutEqualMarks;
+				rdom.selectElement(block);
+				rdom.collapseSelection();
+			}}
+		];
+	}
+	
+	function getAdditionalShortcuts() {
+		if(xq.Browser.isMac) {
+			// Mac FF & Safari
+			return [
+				{event:"Ctrl+Shift+SPACE", handler:"this.handleAutocompletion(); stop = true;"},
+				{event:"Ctrl+Meta+0", handler:"xed.handleApplyBlock('P')"},
+				{event:"Ctrl+Meta+1", handler:"xed.handleApplyBlock('H1')"},
+				{event:"Ctrl+Meta+2", handler:"xed.handleApplyBlock('H2')"},
+				{event:"Ctrl+Meta+3", handler:"xed.handleApplyBlock('H3')"},
+				{event:"Ctrl+Meta+4", handler:"xed.handleApplyBlock('H4')"},
+				{event:"Ctrl+Meta+5", handler:"xed.handleApplyBlock('H5')"},
+				{event:"Ctrl+Meta+6", handler:"xed.handleApplyBlock('H6')"},
+				
+				{event:"Ctrl+Meta+B", handler:"xed.handleApplyBlock('BLOCKQUOTE')"},
+				{event:"Ctrl+Meta+D", handler:"xed.handleApplyBlock('DIV')"},
+				{event:"Ctrl+Meta+EQUAL", handler:"xed.handleSeparator()"},				
+				
+				{event:"Ctrl+Meta+O", handler:"xed.handleList('OL')"},
+				{event:"Ctrl+Meta+U", handler:"xed.handleList('UL')"},
+				
+				{event:"Ctrl+Meta+E", handler:"xed.handleRemoveBlock()"},
+				
+				{event:"Ctrl+(Meta)+COMMA", handler:"xed.handleJustify('left')"},
+				{event:"Ctrl+(Meta)+PERIOD", handler:"xed.handleJustify('center')"},
+				{event:"Ctrl+(Meta)+SLASH", handler:"xed.handleJustify('right')"},
+				
+				{event:"Meta+UP", handler:"xed.handleMoveBlock(true)"},
+				{event:"Meta+DOWN", handler:"xed.handleMoveBlock(false)"}
+			];
+		} else if(xq.Browser.isUbuntu) {
+			//  Ubunto FF
+			return [
+				{event:"Ctrl+SPACE", handler:"xed.handleAutocompletion(); stop = true;"},
+				{event:"Ctrl+0", handler:"xed.handleApplyBlock('P')"},
+				{event:"Ctrl+1", handler:"xed.handleApplyBlock('H1')"},
+				{event:"Ctrl+2", handler:"xed.handleApplyBlock('H2')"},
+				{event:"Ctrl+3", handler:"xed.handleApplyBlock('H3')"},
+				{event:"Ctrl+4", handler:"xed.handleApplyBlock('H4')"},
+				{event:"Ctrl+5", handler:"xed.handleApplyBlock('H5')"},
+				{event:"Ctrl+6", handler:"xed.handleApplyBlock('H6')"},
+				
+				{event:"Ctrl+Alt+B", handler:"xed.handleApplyBlock('BLOCKQUOTE')"},
+				{event:"Ctrl+Alt+D", handler:"xed.handleApplyBlock('DIV')"},
+				{event:"Alt+HYPHEN", handler:"xed.handleSeparator()"},				
+				
+				{event:"Ctrl+Alt+O", handler:"xed.handleList('OL')"},
+				{event:"Ctrl+Alt+U", handler:"xed.handleList('UL')"},
+				
+				{event:"Ctrl+Alt+E", handler:"xed.handleRemoveBlock()"},
+				
+				{event:"Alt+COMMA", handler:"xed.handleJustify('left')"},
+				{event:"Alt+PERIOD", handler:"xed.handleJustify('center')"},
+				{event:"Alt+SLASH", handler:"xed.handleJustify('right')"},
+				
+				{event:"Alt+UP", handler:"xed.handleMoveBlock(true)"},
+				{event:"Alt+DOWN", handler:"xed.handleMoveBlock(false)"}
+			];
+		} else {
+			// Win IE & FF
+			return [
+				{event:"Ctrl+SPACE", handler:"xed.handleAutocompletion(); stop = true;"},
+				{event:"Alt+0", handler:"xed.handleApplyBlock('P')"},
+				{event:"Alt+1", handler:"xed.handleApplyBlock('H1')"},
+				{event:"Alt+2", handler:"xed.handleApplyBlock('H2')"},
+				{event:"Alt+3", handler:"xed.handleApplyBlock('H3')"},
+				{event:"Alt+4", handler:"xed.handleApplyBlock('H4')"},
+				{event:"Alt+5", handler:"xed.handleApplyBlock('H5')"},
+				{event:"Alt+6", handler:"xed.handleApplyBlock('H6')"},
+				
+				{event:"Ctrl+Alt+B", handler:"xed.handleApplyBlock('BLOCKQUOTE')"},
+				{event:"Ctrl+Alt+D", handler:"xed.handleApplyBlock('DIV')"},
+				{event:"Alt+HYPHEN", handler:"xed.handleSeparator()"},
+				
+				{event:"Ctrl+Alt+O", handler:"xed.handleList('OL')"},
+				{event:"Ctrl+Alt+U", handler:"xed.handleList('UL')"},
+				
+				{event:"Ctrl+Alt+E", handler:"xed.handleRemoveBlock()"},
+				
+				{event:"Alt+COMMA", handler:"xed.handleJustify('left')"},
+				{event:"Alt+PERIOD", handler:"xed.handleJustify('center')"},
+				{event:"Alt+SLASH", handler:"xed.handleJustify('right')"},
+				
+				{event:"Alt+UP", handler:"xed.handleMoveBlock(true)"},
+				{event:"Alt+DOWN", handler:"xed.handleMoveBlock(false)"}
+			];
+		}
+	}
+	
+	var quickSearch = function(xed) {
+		var dialog = new xq.controls.QuickSearchDialog(xed, {
+			listProvider: function(query, xed, callback) {
+				var headings = xed.rdom.searchHeadings();
+				var matched = headings.findAll(function(h) {
+					return xed.rdom.getInnerText(h).toLowerCase().indexOf(query.toLowerCase()) != -1;
+				});
+				callback(matched);
+			},
+			onSelect: function(xed, selected) {
+				xed.focus();
+				xed.rdom.scrollIntoView(selected, true, true);
+			}
+		});
+		dialog.show();
+	}
+	
+	var contextMenuHandler = function(editor, element, x, y) {
+		if(element.nodeName != "P") return false;
+		editor.showContextMenu([
+			{
+				title: '볼드',
+				handler: editor.handleStrongEmphasis.bind(xed)
+			},
+			{
+				title: '언더라인',
+				handler: editor.handleUnderline.bind(xed)
+			},
+			{
+				title: '----'
+			},
+			{
+				title: 'QuickSearch',
+				handler: quickSearch
+			}
+		], x, y);
+		
+		return true;
+	}
+	//]]></script>
+</head>
+
+<body>
+	<div id="xqEditor">
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<ul>
+			<li>Item 1</li>
+			<li>Item 2</li>
+		</ul>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<ul>
+			<li>
+				<p>Item 1</p>
+				<ol>
+					<li>Item 1</li>
+					<li>Item 2</li>
+				</ol>
+			</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+		</ul>
+		<p>This holds true both for individuals as well as whole tagging communities.</p>
+		<div>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<blockquote>
+				<p>This holds true both for individuals as well as whole tagging communities.</p>
+			</blockquote>
+		</div>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<blockquote>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<blockquote>
+				<p>This holds true both for individuals as well as whole tagging communities.</p>
+			</blockquote>
+		</blockquote>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<h2>Heading 2</h2>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h1>Heading 1</h1>
+		<h2>Heading 2</h2>
+		<h3>Heading 3</h3>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h4>Heading 4</h4>
+		<h5>Heading 5</h5>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<h6>Heading 6</h6>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		<ol class="code">
+			<li>print "Hello World"</li>
+			<li>print "Hello World"</li>
+		</ol>
+		<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+	</div>
+</body>
+</html>

modules/editor/skins/xquared/examples/form_and_textarea.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - Form and Textarea</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"));
+		xed.setEditMode('wysiwyg');
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	//]]></script>
+</head>
+
+<body>
+	<form action="#" method="post" onsubmit="alert(document.getElementById('xqEditor').value); return false;">
+		<label>Subject: <input type="text" name="subject" /></label>
+		<label>Content:
+		<textarea name="content" id="xqEditor">&lt;p&gt;Hello &lt;a href="#"&gt;World&lt;/a&gt;!&lt;/p&gt;</textarea>
+		</label>
+		<input type="submit" />
+	</form>
+</body>
+</html>

modules/editor/skins/xquared/examples/toolbar_customized1.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - Custom toolbar 1</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"));
+		xed.config.defaultToolbarButtonMap = [
+			[
+				{className:"foregroundColor", title:"Foreground color", handler:"xed.handleForegroundColor('red')"},
+				{className:"backgroundColor", title:"Background color", handler:"xed.handleBackgroundColor('yellow')"}
+			],
+			[
+				{className:"strongEmphasis", title:"Strong emphasis", handler:"xed.handleStrongEmphasis()"},
+				{className:"emphasis", title:"Emphasis", handler:"xed.handleEmphasis()"},
+				{className:"underline", title:"Underline", handler:"xed.handleUnderline()"},
+				{className:"strike", title:"Strike", handler:"xed.handleStrike()"}
+			],
+			[
+				{className:"superscription", title:"Superscription", handler:"xed.handleSuperscription()"},
+				{className:"subscription", title:"Subscription", handler:"xed.handleSubscription()"}
+			],
+			[
+				{className:"removeFormat", title:"Remove format", handler:"xed.handleRemoveFormat()"}
+			]
+		];
+		xed.setEditMode('wysiwyg');
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	//]]></script>
+</head>
+
+<body>
+	<div id="xqEditor"></div>
+</body>
+</html>

modules/editor/skins/xquared/examples/toolbar_customized2.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - Custom toolbar 2</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<style type="text/css">
+		.toolbar .buttons .selected {
+			font-weight: bold;
+		}
+	</style>
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"), $("xqToolbarContainer"));
+		xed.setEditMode('wysiwyg');
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	//]]></script>
+</head>
+
+<body>
+	<div class="toolbar">
+		<ul id="xqToolbarContainer" class="buttons">
+			<li class="foregroundColor"><a href="#" title="Foreground color" onclick="xed.handleForegroundColor('red');return false;" onmousedown="return false;">Foreground color</a></li>
+			<li class="strongEmphasis"><a href="#" title="Strong emphasis" onclick="xed.handleStrongEmphasis();return false;" onmousedown="return false;">Strong emphasis</a></li>
+			<li class="undo"><a href="#" title="Undo" onclick="xed.handleUndo();return false;" onmousedown="return false;">Undo</a></li>
+			<li class="redo"><a href="#" title="Redo" onclick="xed.handleRedo();return false;" onmousedown="return false;">Redo</a></li>
+		</ul>
+	</div>
+	<div>
+		<div id="xqEditor" class="editor">
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<p>This holds true both for individuals as well as whole tagging communities.</p>
+			<ul>
+				<li>Item 1</li>
+				<li>Item 2</li>
+			</ul>
+			<p>This holds true both for individuals as well as whole tagging communities.</p>
+			<ul>
+				<li>
+					<p>Item 1</p>
+					<ol>
+						<li>Item 1</li>
+						<li>Item 2</li>
+					</ol>
+				</li>
+				<li>Item 2</li>
+				<li>Item 3</li>
+			</ul>
+			<p>This holds true both for individuals as well as whole tagging communities.</p>
+			<div>
+				<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+				<blockquote>
+					<p>This holds true both for individuals as well as whole tagging communities.</p>
+				</blockquote>
+			</div>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<blockquote>
+				<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+				<blockquote>
+					<p>This holds true both for individuals as well as whole tagging communities.</p>
+				</blockquote>
+			</blockquote>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<h1>Heading 1</h1>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<h1>Heading 1</h1>
+			<h2>Heading 2</h2>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<h1>Heading 1</h1>
+			<h2>Heading 2</h2>
+			<h3>Heading 3</h3>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<h4>Heading 4</h4>
+			<h5>Heading 5</h5>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<h6>Heading 6</h6>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+			<ol class="code">
+				<li>print "Hello World"</li>
+				<li>print "Hello World"</li>
+			</ol>
+			<p>Most notably, it has been confirmed in many empirical studies on tagging(see e.g. [Golder:2005, Hotho:2006, Cattuto:2006]), that tag distributions tend follow a power law—a small number of tags is used very often, while a very large number of tags occurs very rarely.</p>
+		</div>
+	</div>
+</body>
+</html>

modules/editor/skins/xquared/examples/toolbar_disabled.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+<title>Xquared example - No toolbar</title>
+	<link rel="stylesheet" type="text/css" href="css/xq_ui.css" />
+	<script type="text/javascript" src="../js/prototype.js"></script>
+	<script type="text/javascript" src="../js/xquared.js"></script>
+	<script type="text/javascript">//<![CDATA[
+	var xed;
+	
+	window.onload = function() {
+		xed = new xq.Editor($("xqEditor"));
+		
+		// Turn off default toolbar
+		xed.config.generateDefaultToolbar = false;
+		
+		xed.setEditMode('wysiwyg');
+		xed.loadStylesheet("css/xq_contents.css");
+		xed.focus();
+	}
+	//]]></script>
+</head>
+
+<body>
+	<div id="xqEditor"></div>
+</body>
+</html>