• Page 1 of 1
  • 1
uCause Community » uCoz Modules » Additional Features » Visual or WYSIWYG Editor ((Illustrated manual))
Visual or WYSIWYG Editor
SirDarknight(Tonmoy)Date: Thursday, 2011-07-07, 2:13 PM | Message # 1
Member
Group: Senior Members
Messages: 894
Awards: 10
Reputation: 15
Status: :-(
Visual or WYSIWYG (What You See Is What You Get) Editor is intended for work with site pages without the access to HTML code. This is a light version of standard html-editors with hints. The editor has tool area and editing area. Tool area has two bars.

Tools of the upper bar



Loup icon. Permits to preview the content (only content, without design). When you click on it there will appear variants of screen resolution, in which you can view the content





Paste icon. Allows to paste text from Microsoft Word. When you click on it there will appear a window where you can paste the text





Undo (left) and Redo (right) icons. Permit to cancel some action or repeat it.



Text Color icon. Permits to set text color. When you click on the icon there will appear a color palette.



A cross in the lower left corner will close the palette. If those colors are not enough click on "More Colors" to see a larger palette.



Here you can choose Web Palette (256 colors), Named Colors and Web Safe palette (216 colors). Those are palettes accepted for Web-pages. Illustrations, created with the use of such palette, will be displayed on any computer model without any color distortions. There are RGB color model values on the left and a color code (#b0e0e6) which you can paste in page html-code. Below are color samples – the one you select and the current one. So, select a color and click "apply". If you are going to use the chosen color often you can add it to Custom Colors – just click on "Add to Custom Colors" and this color will appear on the minor palette under "Custom Colors".





Background Color icon. Permits to choose a color of the background. The work with this icon is similar to the work with the text color (minor and large palettes).



Hyperlink icon. Permits to paste URL on a page. When you click on it you’ll see a dialog box with a number of parameters.



Image icon. Permits to insert images. When you click on it you’ll see a dialog box with a number of parameters.



In the upper line you can select an image from File Manager. If an image is on your computer or some other resource you should first upload it to File Manager. The second field is for the name which will serve as an alt-tag of the image. In the third line you can choose an alignment type for your image



The chosen variant is displayed in the lower part of the window. "Border" button permits to select a border for an image (type, thickness, color)



In the dialog box you can also specify image dimensions and indents in pixels. An example of the specified values will be displayed in the lower part of the box.



Flash icon. Permits to insert flash animation. When you click on it you’ll see a dialog box with a number of parameters.



The window is similar to the window for image insertion. You specify a file in File Manager, background color (by means of palettes), file dimensions, playback quality, alignment and loop (whether to repeat animation or not).



Table icon. Permits to insert a table. When you click on the icon you’ll see a simple variant of table making.



Select a number of columns and rows by means of the mouse and click to confirm your choice. To make a more complex table click on "Advanced".



There will appear a new dialog window where you can choose a number of rows, columns, distance between cells, border, and can merge (span) columns or rows.



Edit Table icon. Permits to edit an existing table. Click on it and choose what to edit – cells or the table



Table Size dialog box permits to insert, merge and remove rows and cells of an existing table. A cell with the cursor in it will undergo changes.



Edit Table dialog box has three tabs





In AutoFit tab you can specify width and height of a table.
AutoFit to contents – height and width are equal to the text height and width.
Fixed width and height – sets values in pixels.
AutoFit to window – width and height of a table are equal to the window of Visual Editor.

In Properties tab you can set alignment of a table, margins, table boarder and background.

Edit Cell dialog box is almost the same and has the same parameters.

P.S. You can delete a cell or a table by means of clicking on a cross, situated on table lines



In Style tab you can enter additional attributes of a table using CSS language.



Omega icon. Permits to insert special characters, e.g. ©, £ etc. When you click on the icon you’ll see a list of characters and a field with the code of a given character below. To choose a character click on it.





Line icon. Permits to insert a line, which corresponds to the hr tag.





Cross icon. Permits to delete all content of a page. When you click on it the system will ask for the confirmation



Rubber icon. Permits to remove formatting. Formatting is a process of changing text appearance for different purposes, e.g. change of color, font, point size, alignment etc. Selection of formatted text and clicking on Rubber icon will return the text to its unmodified state (Verdana, black color, 8-point type, left alignment without indents).



HTML icon. Permits to edit HTML code in a separate window.

Tools of the lower bar

Styles & Formatting icon. Has a drop-down list



The work with text, paragraph, lists – similar to the work in Microsoft Word editor. Box Formatting has approximately the same parameters as the Edit Table tool, described above. 'Custom CSS' tool permits to enter CSS attributes in a separate window..



The text formatting panel is similar to that of the Microsoft Word. Includes (from left to right): work with a paragraph, choice of a font, size, making a text bold, italicized, underlined, left alignment, centered text, right alignment, numbered list, bulleted list, right indent, left indent.


Please Give Me A Award or + Rep If My Post Helps You

Please Give Me A Award or + Rep If You Like my Scripts


Message edited by SirDarknight(Tonmoy) - Thursday, 2011-07-07, 2:15 PM
 
0 Thanked you For This Useful Post:
HermesDate: Thursday, 2011-07-07, 2:43 PM | Message # 2
Member
Group: Senior Members
Messages: 455
Awards: 7
Reputation: 8
Status: :-(
SirDarknight(Tonmoy), Great! smile
 
0 Thanked you For This Useful Post:
SirDarknight(Tonmoy)Date: Thursday, 2011-07-07, 2:47 PM | Message # 3
Member
Group: Senior Members
Messages: 894
Awards: 10
Reputation: 15
Status: :-(
Hermes, thnx

Please Give Me A Award or + Rep If My Post Helps You

Please Give Me A Award or + Rep If You Like my Scripts
 
0 Thanked you For This Useful Post:
uCause Community » uCoz Modules » Additional Features » Visual or WYSIWYG Editor ((Illustrated manual))
  • Page 1 of 1
  • 1
Search:


"Making uCoz web designs simple and easy to use"
- uCause Developers