 |
AspLib component library | Send comments on this topic. |
Glossary Item Box
|
AspLib component library | Send comments on this topic. |
Many functions of Editor are accessible via the toolbars, context menus (accessible through a right-click menu in the content area). This section contains reference documentation for all of the toolbars customization.
You can easily customize toolbar layout using ToolbarLayout and ToolbarHTMLModeLayout properties.
| Menu/Button | Function Description | Layout Item |
 Save |
saves the active content in the editor's content area | postback |
 Print |
prints the current page. | |
 Find and replace |
find and replace the text in the editor's content area | findreplace |
 Full-Screen |
edit in full screen mode, maximizing your available space. | fullscreen |
 Code Cleaner |
clean up all "garbage" HTML-tags | cleancode |
 Spell |
launch the spell checker | spell |
 Cut |
performs normal function of cutting. | cut |
 Copy |
copy the current selection and store it in the clipboard. | copy |
 Paste |
insert content from the clipboard into the editor at the selected position. | paste |
 Paste Plain Text |
paste the plain text (no formatting) into the editor. | pastetext |
 Paste from word |
paste the content copied form the microsoft word and remove the web-unfriendly tags | pasteword |
 Undo |
undo the last operation in the editor. | undo |
 Redo |
redo the last operation in the editor. | redo |
 Edit style |
edit style of the current tag | editstyle |
 Delete style |
removes the style of the tag | removestyle |
 New Paragraph |
insert the new paragraph | newparagraph |
 Break |
insert the line break. | break |
 Page Break |
insert print page break | pagebreak |
 Insert the current date |
Insert the current date. The date format used is the date format configured on the clientas machine. | date |
 Insert the current time |
Insert the current time. The time format used is the time format configured on the clientas machine. | time |
 Visible Borders |
make table borders visible, which can make editing easier. | showborders |
 Special Chars |
insert a special character from a predefined list. | insertsymbol |
 Insert Emotion |
insert an emotion image at the selected position in the editor. | insertsmile |
 Statistics |
document statistics | showstat |
 Universal keyboard |
show universal keyboard | unikeyb |
 Text Frame |
allows you to insert, edit, or reposition text regions. | inserttext |
 GroupBox |
allows you to a group box (FieldSet) at the selected position in the editor | fieldset |
 Insert Image |
insert an image at the selected position in the editor and let you set its properties. | insertimage |
 Image map |
edit or insert image map for selected image | imagemap |
 Insert Flash |
insert a flash animation at the selected position and let you set its properties. | insertflash |
 Insert Media |
insert a windows media object at the selected position and let you set its properties. | insertmedia |
 Insert IFrame |
insert iframe tag | insertiframe |
 Insert Table |
insert a table into your web page. | inserttable |
 Insert Rows |
insert a row above the selected row. | insertrow |
 Delete Rows |
delete the selected row. | deleterow |
 Insert Column |
insert a column to the left of the selected cell. | insertcolumn |
 Delete columns |
delete the selected column. | deletecolumn |
 Insert cells |
insert cells into the selected row. | insertcell |
 Delete cells |
delete the selected cell. | deletecell |
 Row properties |
edit row properties | rowproperty |
 Cell properties |
edit cell properties | cellproperty |
 Column properties |
edit properties of the cells in table column | columnproperty |
 Merge cells |
merge the current cell with the one to its right. | mergecell |
 Vertical split |
Split a cell into rows | splitcell |
 Form |
insert a form at the selected position | This items in the Form select list |
 TextArea |
insert a textarea at the selected position | |
 Input Text Box |
insert a input text box at the selected position | |
 Password field |
insert a password field at the selected position | |
 Hidden field |
insert a hidden field at the selected position | |
 ListBox |
insert a list box at the selected position | |
 Radio Button |
insert a radio button at the selected position | |
 Checkbox |
insert a checkbox at the selected position | |
 Image Button |
insert an image button at the selected position | |
 Submit Button |
insert a submit button at the selected position | |
 Reset Button |
insert a reset button at the selected position | |
 Element properties |
edit form element properties | editelement |
 Bold |
bold the selected text. | bold |
 Italicize |
italicize the selected text. | italic |
 Underline |
underline the selected text. | underline |
 Left Justify |
align the selected content to the left. | justifyleft |
 Center |
center the selected content. | justifycenter |
 Right Justify |
align the selected content to the right | justifyright |
 Justify None |
Justify Full | justifyfull |
 Remove Format |
remove format of the selected text. | removeformat |
  Font Color |
change color of the selected text | forecolor |
 Highlight |
highlight the selected text | backcolor |
 Ordered List |
insert an ordered list. | insertorderedlist |
 Unordered List |
Insert an unordered list. | insertunorderedlist |
 List style |
edit list style | liststyle |
 Indent |
indent the selected content. | indent |
 Outdent |
outdent the selected content. | outdent |
 Subscript |
change the selected text to subscript. | subscript |
 Superscript |
change the selected text to superscript. | superscript |
 Strike Through |
strike through the selected text | strikethrough |
 Upper Case |
convert the selected text to upper case | ucase |
| Lower Case |
convert the selected text to lower case | lcase |
 Insert Rule |
insert a horizontal rule at the selected position in the editor. | inserthorizontalrule |
 Insert Link |
add a link to the text on your page. | createlink |
 Remove Link |
remove the hyperlink from the selected content. | unlink |
 Select All |
select all content. | selectall |
 Absolute Position |
fly text, pictures, tables... any element anywhere you want. | absoluteposition |
 Bring Forward |
bring an item one position forward at a time. | sendforward |
 Send Backward |
send an item one position back at a time. | sendbackward |
 Toggle Border |
toggle the visibility of borders | visibleborders |
 Page Properties |
allow you modify the page properties | editpage |
 Help |
Returns a help Toolbar Button. The help page URL is set by the HelpUrl Property. | help |
 |
class drop-down changes the CSS class of the selected text | classselect |
 |
paragraph drop-down changes the paragraph style of the selected text. | paragraphnameselect |
 |
font drop-down set the font face. If a selection is active, the font will be applied to it. | fontselect |
 |
size drop down set the font size. If a selection is active, the font will be applied to it. | fontsizeselect |
 |
form elements list | formselect |
 |
insert predefined HTML code snippets on the current selection. | snippetselect |
On the toolbar you can see the buttons with drop-down arrows - forecolor button - backcolor button - inserttable button
When you clicks on the arrow you will see the pop-ups for selecting a color or for easily table creation
ColorPicker for selecting color of text or background color:
Table-creating pop-up for creating new table on-the-fly:
You can easily add your own custom buttons to the Editor toolbar using the toolbar layout editor in the component properties list.
The CSS Class dropdown of Editor displays a predefined set of CSS Classes. You can easily add your own CSS Classes using the following method.
In the CS file:
| Editor1.AddCssClass("<span style='color: red;' unselectable='on'>Red text</span>", "txtred", "color: red;"); Editor1.AddCssClass("<b style='color: green;' unselectable='on'>Bold green text</b>", "txtgreen", "color: green; font-weight: bold;"); |
After adding this lines to the code you will see next list of the classes:
The Snippets dropdown of Editor by default displays a predefined set of Code Snippets. You can easily modify this default set using the following method.
| Editor1.AddSnippet("Simple snippet", "<b>Simple snippet</b>"); Editor1.AddSnippet("Contact", "<br />TestCompany<br />40, Main St, apt. 105<br />Baltimore, Maryland 21201"); Editor1.AddSnippet("Copyright", "<i>Copyright 2004 WebSolution Ltd. All rights reserved.</i>"); |
After adding this lines to the code you will see next list of the snippets:
Editor can assign keyboard shortcuts to every tool. The shortcut mechanism overrides the default shortcuts of the browser, like Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+F, Ctrl+P, to allows the use of combinations for custom purposes.
| Ctrl+B | - Bold command |
| Ctrl+I | - Italic command |
| Ctrl+U | - Underline command |
| Ctrl+F | - Find-replace command |
| Ctrl+P | - Print command |
You can configure Editor's toolbar using Toolbar editor. Open Editor tasks window and select "Configurate Toolbar Layout" item.
In the opened toolbar editor you can set Editor toolbar as you need. You can drag any button from middle panel and drop it on any toolbar line in top panel. Also you can add custom button using this dialog.
| See Also |
Client-side API: Editor client-side API
Click to enlarge