CodeThatEditor Example - Editor Look

CodeThatEditor Example - Editor Look

<script language="javascript1.2">
<!--
var editorDef = {
	text : "<h1 align=center>Style heading 1</h1>\n"
	 + "<font color=\"#ff0000\" face='Arial'><b><i><u>Colored text</u></i></b></font>\n"
	 + "<font size=1>and</font> <font size=1>text</font> <font size=3>with</font>"
	 + "<font size=4>different</font> <font size=5>size</font> <font size=6>of</font>"
	 + "<font size=7>fonts</font><br>\n"
	 + "<pre>Formatted text</pre>",
	style : {
		width : 400,
		height : 200,
		defaultClass : {
			backgroundcolor : "#ffffff",
			bordercolor : "#efefe0",
			borderstyle : "inset",
			borderwidth : 2
		}
},
	toolBar : 	{
		height : 60,
		bgcolor : '#ffffff',
		defaultClass : {
			Color : "#000000"
		},
		buttons : [
		{
			name : "bold",
			text : "Bold",
			img_on : {
				src : '../Manual/img/post_button_bold.gif', width : 22, height : 22
			}
		},
		{
			name : "italic",
			text : "Italic",
			img_on : {
				src : '../Manual/img/post_button_italic.gif', width : 22, height : 22
			}
		},
		{
			name : "underline",
			text : "Underline",
			img_on : {
				src : '../Manual/img/post_button_underline.gif', width : 22, height : 22
			}
		},
		{
			name : "justifyleft",
			text : "Align left",
			img_on : {
				src : '../Manual/img/post_button_left_just.gif', width : 22, height : 22
			}
		},
		{
			name : "justifycenter",
			text : "Align center",
			img_on : {
				src : '../Manual/img/post_button_centre.gif', width : 22, height : 22
			}
		},
		{
			name : "justifyright",
			text : "Align right",
			img_on : {
				src : '../Manual/img/post_button_right_just.gif', width : 22, height : 22
			}
		},
		{
			name : "insertorderedlist",
			text : "Insert ordered list",
			img_on : {
				src : '../Manual/img/post_button_numbered_list.gif', width : 22, height : 22
			}
		},
		{
			name : "insertunorderedlist",
			text : "Insert unordered list",
			img_on : {
				src : '../Manual/img/post_button_list.gif', width : 22, height : 22
			}
		},
		{
			name : "outdent",
			text : "Outdent",
			img_on : {
				src : '../Manual/img/post_button_outdent.gif', width : 22, height : 22
			}
		},
		{
			name : "indent",
			text : "Indent",
			img_on : {
				src : '../Manual/img/post_button_indent.gif', width : 22, height : 22
			}
		},
		{
			name : "forecolor",
			text : "Set text color",
			img_on : {
				src : '../Manual/img/post_button_textcolor.gif', width : 22, height : 22
			}
		},
		{
			name : "backcolor",
			text : "Set background color",
			img_on : {
				src : '../Manual/img/post_button_bgcolor.gif', width : 22, height : 22
			}
		},
		{
			name : "createlink",
			text : "Create link",
			img_on : {
				src : '../Manual/img/post_button_hyperlink.gif', width : 22, height : 22
			}
		},
		{
			name : "addimage",
			text : "Add image",
			img_on : {
				src : '../Manual/img/post_button_image.gif', width : 22, height : 22
			}
		},
		{
			name : "cut",
			text : "Cut",
			img_on : {
				src : '../Manual/img/post_button_cut.gif', width : 22, height : 22
			}
		},
		{
			name : "copy",
			text : "copy",
			img_on : {
				src : '../Manual/img/post_button_copy.gif', width : 22, height : 22
			}
		},
		{
			name : "paste",
			text : "Paste",
			img_on : {
				src : '../Manual/img/post_button_paste.gif', width : 22, height : 22
			}
		},
		{
			name : "preview",
			text : "Preview",
			img_on : {
				src : '../Manual/img/post_button_preview.gif', width : 20, height : 20
			}
		} ],
		styletext : "Style",
		styles : [
		{
			tag : "span", text : "Normal"
		},
		{
			tag : "h1", text : "Heading 1"
		},
		{
			tag : "h2", text : "Heading 2"
		},
		{
			tag : "h3", text : "Heading 3"
		},
		{
			tag : "h4", text : "Heading 4"
		},
		{
			tag : "h5", text : "Heading 5"
		},
		{
			tag : "h6", text : "Heading 6"
		},
		{
			tag : "pre", text : "Formatted"
		},
		{
			tag : "p", text : "Paragraph"
		} ],
		fonttext : "Font",
		fonts : [
		{
			name : "Arial, Helvetica, sans-serif", text : "Arial"
		},
		{
			name : "Courier New, Courier, mono", text : "Courier New"
		},
		{
			name : "Times New Roman, Times, serif", text : "Times New Roman"
		},
		{
			name : "Verdana, Arial, Helvetica, sans-serif", text : "Verdana"
		},
		{
			name : "Tahoma, sans-serif", text : "Tahoma"
		},
		{
			name : "Comic Sans MS, sans-serif", text : "Comic Sans MS"
		} ],
		fontsizetext : "Font size",
		fontsizes : [1, 2,3, 4,5, 6,7]
	},
	pallete : [
	['FFFFFF', 'FFCCCC', 'FFCC99',
	'FFFF99', 'FFFFCC', '99FF99', '99FFFF', 'CCFFFF', 'CCCCFF', 'FFCCFF'],
	['CCCCCC', 'FF6666', 'FF9966',
	'FFFF66', 'FFFF33', '66FF99', '33FFFF', '66FFFF', '9999FF', 'FF99FF'],
	['C0C0C0', 'FF0000', 'FF9900',
	'FFCC66', 'FFFF00', '33FF33', '66CCCC', '33CCFF', '6666CC', 'CC66CC'],
	['999999', 'CC0000', 'FF6600', 'FFCC33', 'FFCC00', '33CC00', '00CCCC',
	'3366FF', '6633FF', 'CC33CC'],
	['666666', '990000', 'CC6600', 'CC9933', '999900', '009900', '339999',
	'3333FF', '6600CC', '993399'],
	['333333', '660000', '993300', '996633', '666600', '006600', '336666',
	'000099', '333399', '663366'],
	['000000', '330000', '663300', '663333', '333300', '003300', '003333',
	'000066', '330099', '330033']
	]
};
var ed = new CEditor('ed', editorDef);
ed.create();
//-->
</script>