Interface Overview

The interface of WYSIWYG online editor can be mainly divided into the three following parts:

• Toolbar
  On the top of the editor, there is a toolbar which mainly consists of various editing function options and button icons. When you want to add or modify the contents in editing area, all you have to do is just to click on the icons or make relative options.
• Editing Area
  In the middle empty space of the editor, there is an editing area which is mainly for you to input or edit the contents. All the editing contents are WYSIWYG. But under editing condition, some parts of the contents such as moving images, texts and media can only display in still states, which will display in real reappearance when you transfer to preview.
• Status Bar
  In the bottom of the editor, there is status bar which mainly contains button icons for transforming editor's states. The editor's states can be divided into code state, editing code (by default), text state and preview state. The detailed function of every state can be found in "Help directory of Instructions for Status Bar".

Instructions for Toolbar

eWebEditor integrates over 100 functional buttons in toolbar. Details can be found in [Functional Buttons collections].

Many buttons have dual functions, such as buttons of inserting or modifying images. Clicking the buttons, they can do insertion when no image is selected, as well as modification when any image is selected. Another example is functional button of formatting bold font. Click this button will transfer the selected text into bold font if the selected text is not in bold font, but if the selected text is already in bold font, clicking the button of formatting bold font will transfer the selected text into non-bold font.

Instructions for Editing Area

In editing area, there is mostly editing frame for user to edit contents. If the contents exceed the width or length of the frame, scroll bars will emerge automatically. You can also control different editor's state of editing frame through the status transformation in status bar.

Instructions for Status Bar

There is editor's status transforming buttons in status bar which offer four states for customer to transfer. They are:

• Editor's state (by default). Under this state, all the editing contents are in WYSIWYG.
• Code state. Under this state, all editing contents are displayed and edited in HTML tag source code.
• Text State. Under this of state, all editing contents are displayed and edited in plain text mode.
• Preview State. Under this state, all editing contents are displayed in page export mode which cannot be edited. However, you can preview the final exported effect of the editing contents.