|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
|
|
|
|
CODETHATEDITOR MANUAL |
Introduction
With CodeThatEditor you can
Configure every aspect of the editor look
Editor toolbar customization : customize style list, font list and buttons (PRO version only)
Customize pallete (PRO version only)
Read editor data from the database
Save editor data at the database
For Work With CodeThatEditor You Need the Following Files:
<script language="javascript" src="codethatsdk.js"></script> // SDK <script language="javascript" src="codethateditorpro.js"></script> // CodeThatEditor Class |
CodeThatEditor Initialization:
<script language="javascript1.2">
<!--
var editor = new CEditor('editor', editorDef);
editor.create();
//-->
</script>
|
CEditor constructor parameters:
editor : Object - variable-link to the object from CEditor class
editorDef - definition object for CEditor
Below is a general object editorDef:
var editorDef = {
// text that will be appear in editor
text : "<h1 align=center>My test</h1><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
},
img_off : {
src : 'img/post_button_bold_off.gif',
width : 22, height : 22
}
},
...
],
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']
]
};
|
Note: toolBar and pallete are optional parameters. It means in case you leave its empty, you'll create an editor with default toolBar and pallete.
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.