javascript editor java script text editor html wysiwyg editor dhtml tex editor editing made easy wysiwyg text editor web page memo field text editor

PRODUCTS

JavaScript Projects

PHP Projects

Javascript Tools

Website Templates

SUPPORT

Standard vs PRO

FAQ

Forum

Contacts

Site Map

CODETHAT

Sales & Prices

Downloads

Users Testimonials

Affiliate registration

Our Customers

STUDIO   GRID   TABLE   MENU   TREE   XPBAR   HINT   EDITOR   TAB   FORM   CALENDAR   SCROLLER   SHOPPINGCART   TREEPHP   PACKER

User Manual

Introduction    Configure editor look    Configure editor pallete

Data from the database    Data Saving    E-mail sending

Using icons    Editor Reference    Standard vs PRO

123Guide

Examples

Download

Order PRO Now

Themes

CODETHATEDITOR MANUAL

Configure Editor Look

Here we describe EditorDef properties that specify editor look:

Full customization support for editor through the CSS classes and by using editor properties

Editor toolbar customization

To specify editor look in whole use following structure

style : {
	width : int,  // width of editor work area
	height : int, // height of editor work area
	defaultClass : CSS class | {
		styleparams
	}
}, 

To describe {styleparams} use the following:

{
	// border params
	borderwidth : int, // make sense only if tableStyle.border > 0
	bordercolor : "#RGB|COLORNAME",
	borderstyle : "none" | "dotted" | "dashed" | "solid"
	| "double" | "groove" | "ridge" | "inset" | "outset",
	// background parameters
	backgroundcolor : "#RGB | COLORNAME",
	backgroundimage : "URL(SRC) ",
	backgroundrepeat : "repeat" | "repeat-x" | "repeat-y" | "no-repeat",
	// color of text (this setting is not useful for set color of a parameters)
	color : "#RGB | COLORNAME",
	// font parameters
	fontfamily : "FONTNAME",
	fontstyle : "normal" | "italic" | "oblique",
	fontweight : "normal" | "bold" | "bolder" | "lighter"
	| "100" | "200" | "300" | "400" | "500"
	| "600" | "700" | "800" | "900",
	fontsize : "NUMBER px | pt",
	// text params
	textalign : "left" | "right" | "center" | "justify",
	textdecoration : "none" | "underline" | "overline" | "line-through",
	verticalalign : "bottom" | "top" | "middle"
}

To specify toolbar look use the following structure:

// 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
}

Possible values for buttons name: "bold", "italic", "underline", "justifyleft", "justifycenter", "justifyright", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "forecolor", "backcolor", "createlink", "addimage", "paste", "cut", "copy", "preview".

Note: preview button uses in browsers that don't support full mode and strongly recommended to use in toolBar.

Example - Editor Look

You can see an example and complete code here - Editor Look [popup]

Read more about CodeThatEditor >>

[ Home ]  [ Forum ]  [ Contacts ]  [ Site Map ]  [ News ]  [ Links ]  [ Sales & Prices ]  [ Downloads ]

[ Go Top ]

© CodeThat.com, 2003-2008
Design by XTLabs, Inc.