CodeThatEditor Example - Editor Pallete and several editors at one page
<script language="javascript1.2">
<!--
var editorDef1 = {
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 : 'img/post_button_bold.gif', width : 22, height : 22
}
},
{
name : "italic",
text : "Italic",
img_on : {
src : 'img/post_button_italic.gif', width : 22, height : 22
}
},
{
name : "underline",
text : "Underline",
img_on : {
src : 'img/post_button_underline.gif', width : 22, height : 22
}
},
{
name : "justifyleft",
text : "Align left",
img_on : {
src : 'img/post_button_left_just.gif', width : 22, height : 22
}
},
{
name : "justifycenter",
text : "Align center",
img_on : {
src : 'img/post_button_centre.gif', width : 22, height : 22
}
},
{
name : "justifyright",
text : "Align right",
img_on : {
src : 'img/post_button_right_just.gif', width : 22, height : 22
}
},
{
name : "insertorderedlist",
text : "Insert ordered list",
img_on : {
src : 'img/post_button_numbered_list.gif', width : 22, height : 22
}
},
{
name : "insertunorderedlist",
text : "Insert unordered list",
img_on : {
src : 'img/post_button_list.gif', width : 22, height : 22
}
},
{
name : "outdent",
text : "Outdent",
img_on : {
src : 'img/post_button_outdent.gif', width : 22, height : 22
}
},
{
name : "indent",
text : "Indent",
img_on : {
src : 'img/post_button_indent.gif', width : 22, height : 22
}
},
{
name : "forecolor",
text : "Set text color",
img_on : {
src : 'img/post_button_textcolor.gif', width : 22, height : 22
}
},
{
name : "backcolor",
text : "Set background color",
img_on : {
src : 'img/post_button_bgcolor.gif', width : 22, height : 22
}
},
{
name : "createlink",
text : "Create link",
img_on : {
src : 'img/post_button_hyperlink.gif', width : 22, height : 22
}
},
{
name : "addimage",
text : "Add image",
img_on : {
src : 'img/post_button_image.gif', width : 22, height : 22
}
},
{
name : "cut",
text : "Cut",
img_on : {
src : 'img/post_button_cut.gif', width : 22, height : 22
}
},
{
name : "copy",
text : "copy",
img_on : {
src : 'img/post_button_copy.gif', width : 22, height : 22
}
},
{
name : "paste",
text : "Paste",
img_on : {
src : 'img/post_button_paste.gif', width : 22, height : 22
}
},
{
name : "preview",
text : "Preview",
img_on : {
src : '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', editorDef1);
ed.create();
//-->
</script>
<br><br>
<script language="javascript1.2">
<!--
var editorDef2 = {
text : "<h2 align=center>Style heading 2</h2>\n"
+ "<p><b>Bold text</b> <p><u>Underline text</u> <p><i>Italic text</i>",
style : {
width : 300,
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 : 'img/post_button_bold.gif', width : 22, height : 22
}
},
{
name : "italic",
text : "Italic",
img_on : {
src : 'img/post_button_italic.gif', width : 22, height : 22
}
},
{
name : "underline",
text : "Underline",
img_on : {
src : 'img/post_button_underline.gif', width : 22, height : 22
}
},
{
name : "justifyleft",
text : "Align left",
img_on : {
src : 'img/post_button_left_just.gif', width : 22, height : 22
}
},
{
name : "justifycenter",
text : "Align center",
img_on : {
src : 'img/post_button_centre.gif', width : 22, height : 22
}
},
{
name : "justifyright",
text : "Align right",
img_on : {
src : 'img/post_button_right_just.gif', width : 22, height : 22
}
},
{
name : "insertorderedlist",
text : "Insert ordered list",
img_on : {
src : 'img/post_button_numbered_list.gif', width : 22, height : 22
}
},
{
name : "insertunorderedlist",
text : "Insert unordered list",
img_on : {
src : 'img/post_button_list.gif', width : 22, height : 22
}
},
{
name : "outdent",
text : "Outdent",
img_on : {
src : 'img/post_button_outdent.gif', width : 22, height : 22
}
},
{
name : "indent",
text : "Indent",
img_on : {
src : 'img/post_button_indent.gif', width : 22, height : 22
}
},
{
name : "forecolor",
text : "Set text color",
img_on : {
src : 'img/post_button_textcolor.gif', width : 22, height : 22
}
},
{
name : "backcolor",
text : "Set background color",
img_on : {
src : 'img/post_button_bgcolor.gif', width : 22, height : 22
}
},
{
name : "createlink",
text : "Create link",
img_on : {
src : 'img/post_button_hyperlink.gif', width : 22, height : 22
}
},
{
name : "addimage",
text : "Add image",
img_on : {
src : 'img/post_button_image.gif', width : 22, height : 22
}
},
{
name : "cut",
text : "Cut",
img_on : {
src : 'img/post_button_cut.gif', width : 22, height : 22
}
},
{
name : "copy",
text : "copy",
img_on : {
src : 'img/post_button_copy.gif', width : 22, height : 22
}
},
{
name : "paste",
text : "Paste",
img_on : {
src : 'img/post_button_paste.gif', width : 22, height : 22
}
},
{
name : "preview",
text : "Preview",
img_on : {
src : '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', 'FFCC99', 'CCCCFF', 'FFCCFF'],
['CCCCCC', 'FF9966', '9999FF', 'FF99FF'],
['C0C0C0', 'FF9900', '6666CC', 'CC66CC'],
['999999', 'FF6600', '6633FF', 'CC33CC'],
['666666', 'CC6600', '6600CC', '993399'],
['333333', '993300', '333399', '663366'],
['000000', '663300', '330099', '330033']
]
};
var ed1 = new CEditor('ed1', editorDef2);
ed1.create();
//-->
</script>
|