|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
|
|
|
|
CODETHATEDITOR USER GUIDE |
CodeThatEditor User Guide
The following "8 steps" instruction will guide you step by step through the CodeThatEditor configuration process.
Download package with codethateditor script and unarchive it.
For free version (STD) download use this link.
If you'd like to buy full version (PRO) use this link.
Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.
Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
Read Standard vs PRO to know the differences between CodeThatEditor Standard and PRO.
Create the basic HTML file.
Your file may look as following:
<script language="javascript1.2"> <!-- <HTML> <HEAD> <script language = "javascript1.2" src = "codethatsdk.js"> //--> </script> <script language="javascript1.2" src="codethateditorpro.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> |
First of all we should initialize CodeThatEditor:
<script language="javascript1.2">
<!--
var editor = new CEditor('editor', editorDef);
editor.create();
//-->
</script>
|
Now lets create your first CodeThatEditor.
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.
To describe new Editor create an object with following structure:
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']
]
};
|
Hint - if parameters description isn't clearly understanding please have a look to CodeThatEditor User Manual
Data for the Editor
You can describe data for editor by setting property text in EditorDef. Text can be any HTML formatted data.
var EditorDef = {
text : "<h1>My text</h1>",
...
};
|
Then you specify whole editor style, toolbar style, and pallete, and specify the buttons set.
style : {
width : int, //width of editor work area
height : int, //height of editor work area
defaultClass : CSS class | {
styleparams
}
},
// if you'd like to hide some button just remove this button description
// from the toolbar description
toolBar :
{
height : int, // (*) toolbar height
bgcolor : "#RGB | COLORNAME", // (*) toolbar background color
defaultClass : : String | {
styleparams
}, // style
buttons : [ // toolbar buttons
{
name : String, // (*) Name
text : String, // (*) Hint
img_on : {
src : String, width : int, height : int
}, // (*) active button image
img_off : {
src : String, width : int, height : int
}
// inactive button image
},
{ }, // insert separator
...
],
styletext : "Style", // Title for select control with block Styles
styles : [ // Full list of styles that can be used in editor
{
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", // Title for select control with font names
fonts : [
// List of styles that can be used in editor, this list you can customize as you wish
// For add new font add element into array as {name:String, text:String},
// where name is value of font face and text is hint for font face that will be set
{
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", // Title for select control with font sizes
fontsizes : [1, 2,3, 4,5, 6,7] // Full list of font sizes that can be used in editor
}
|
So... A complete code for this example you can see here:
<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>\n"
+ "<font size=4>different</font> <font size=5>size</font> <font size=6>of</font>\n"
+ "<font size=7>fonts</font><br> <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', editorDef);
ed.create();
//-->
</script>
|
Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)
Congratulations! You have just created your first CodeThatEditor enhanced web page.
To make your life easier we do plan to supply you with on and off line Editor builders in the nearest time.
Try an Example [popup]
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.