Yahoo! Developer Network Home - Help

YUI Library Examples: Rich Text Editor (beta): Default Toolbar Config

Rich Text Editor (beta): Default Toolbar Config

This example simply shows the default toolbar config.

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift [ aligns text left
  • Control Shift | centers text
  • Control Shift ] aligns text right
  • Control Shift L adds an HTML link
  • To exit this text editor use the keyboard shortcut Control + Shift + ESC.

You have left the Rich Text Editor.

SimpleEditor default toolbar config

The default toolbar config for YAHOO.widget.SimpleEditor.

1collapse: true, 
2titlebar: 'Text Editing Tools', 
3draggable: false, 
4buttons: [ 
5    { group: 'fontstyle', label: 'Font Name and Size', 
6        buttons: [ 
7            { type: 'select', label: 'Arial', value: 'fontname', disabled: true, 
8                menu: [ 
9                    { text: 'Arial', checked: true }, 
10                    { text: 'Arial Black' }, 
11                    { text: 'Comic Sans MS' }, 
12                    { text: 'Courier New' }, 
13                    { text: 'Lucida Console' }, 
14                    { text: 'Tahoma' }, 
15                    { text: 'Times New Roman' }, 
16                    { text: 'Trebuchet MS' }, 
17                    { text: 'Verdana' } 
18                ] 
19            }, 
20            { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true } 
21        ] 
22    }, 
23    { type: 'separator' }, 
24    { group: 'textstyle', label: 'Font Style', 
25        buttons: [ 
26            { type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' }, 
27            { type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' }, 
28            { type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' }, 
29            { type: 'separator' }, 
30            { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true }, 
31            { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true } 
32        ] 
33    }, 
34    { type: 'separator' }, 
35    { group: 'indentlist', label: 'Lists', 
36        buttons: [ 
37            { type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' }, 
38            { type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' } 
39        ] 
40    }, 
41    { type: 'separator' }, 
42    { group: 'insertitem', label: 'Insert Item', 
43        buttons: [ 
44            { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }, 
45            { type: 'push', label: 'Insert Image', value: 'insertimage' } 
46        ] 
47    } 
48] 
view plain | print | ?

Editor default toolbar config

The default toolbar config for YAHOO.widget.Editor.

1collapse: true, 
2titlebar: 'Text Editing Tools', 
3draggable: false, 
4buttonType: 'advanced', 
5buttons: [ 
6    { group: 'fontstyle', label: 'Font Name and Size', 
7        buttons: [ 
8            { type: 'select', label: 'Arial', value: 'fontname', disabled: true, 
9                menu: [ 
10                    { text: 'Arial', checked: true }, 
11                    { text: 'Arial Black' }, 
12                    { text: 'Comic Sans MS' }, 
13                    { text: 'Courier New' }, 
14                    { text: 'Lucida Console' }, 
15                    { text: 'Tahoma' }, 
16                    { text: 'Times New Roman' }, 
17                    { text: 'Trebuchet MS' }, 
18                    { text: 'Verdana' } 
19                ] 
20            }, 
21            { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true } 
22        ] 
23    }, 
24    { type: 'separator' }, 
25    { group: 'textstyle', label: 'Font Style', 
26        buttons: [ 
27            { type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' }, 
28            { type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' }, 
29            { type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' }, 
30            { type: 'separator' }, 
31            { type: 'push', label: 'Subscript', value: 'subscript', disabled: true }, 
32            { type: 'push', label: 'Superscript', value: 'superscript', disabled: true }, 
33            { type: 'separator' }, 
34            { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true }, 
35            { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }, 
36            { type: 'separator' }, 
37            { type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true }, 
38            { type: 'push', label: 'Show/Hide Hidden Elements', value: 'hiddenelements' } 
39        ] 
40    }, 
41    { type: 'separator' }, 
42    { group: 'alignment', label: 'Alignment', 
43        buttons: [ 
44            { type: 'push', label: 'Align Left CTRL + SHIFT + [', value: 'justifyleft' }, 
45            { type: 'push', label: 'Align Center CTRL + SHIFT + |', value: 'justifycenter' }, 
46            { type: 'push', label: 'Align Right CTRL + SHIFT + ]', value: 'justifyright' }, 
47            { type: 'push', label: 'Justify', value: 'justifyfull' } 
48        ] 
49    }, 
50    { type: 'separator' }, 
51    { group: 'parastyle', label: 'Paragraph Style', 
52        buttons: [ 
53        { type: 'select', label: 'Normal', value: 'heading', disabled: true, 
54            menu: [ 
55                { text: 'Normal', value: 'none', checked: true }, 
56                { text: 'Header 1', value: 'h1' }, 
57                { text: 'Header 2', value: 'h2' }, 
58                { text: 'Header 3', value: 'h3' }, 
59                { text: 'Header 4', value: 'h4' }, 
60                { text: 'Header 5', value: 'h5' }, 
61                { text: 'Header 6', value: 'h6' } 
62            ] 
63        } 
64        ] 
65    }, 
66    { type: 'separator' }, 
67    { group: 'indentlist', label: 'Indenting and Lists', 
68        buttons: [ 
69            { type: 'push', label: 'Indent', value: 'indent', disabled: true }, 
70            { type: 'push', label: 'Outdent', value: 'outdent', disabled: true }, 
71            { type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' }, 
72            { type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' } 
73        ] 
74    }, 
75    { type: 'separator' }, 
76    { group: 'insertitem', label: 'Insert Item', 
77        buttons: [ 
78            { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }, 
79            { type: 'push', label: 'Insert Image', value: 'insertimage' } 
80        ] 
81    } 
82] 
view plain | print | ?

More Rich Text Editor (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings