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