WYSIWYG Editor Help

The What You See Is What You Get (WYSIWYG) editor allows quick assembly of different types of digital content to create a content rich page. It is a versatile text editor that even provides content enhancement options.

 Note: Starting from SamePage 3.4, the project name,description and content will now support multi lingual material.

 


The WYSIWYG Editor opens up when you click on the edit button on any page that you are working on. All the editor supported features can be seen on a collapsible toolbar.
The toolbar can be expanded or collapsed by clicking on the  or  buttons respectively,that can be found on the right most corner on the toolbar.

The edit screen can also be enlarged for viewing in full screen mode by clicking on the enlarge editor  button on  the right of the toolbar.

SamePage is supported on the following browsers
  • Windows
    • Microsoft Internet Explorer 7
    • Microsoft Internet Explorer 6
    • Mozilla Firefox 1.5 and above
    • Safari 3.0 (beta)
  • MAC
    • Mozilla Firefox 1.5
    • Safari 2.0 (with limited support for WYSIWYG Editing)
    • Safari 3.0 (beta)



  


The toolbar has self-explanatory icons for the following key text and content creation functionalities.

General Text Editing

Special Content Editing
For more information on the different types of plugins click here.

  Tip: Keyboard Shortcuts may be used to perform common editing tasks.



Return to Top

Editing Content


The WYSIWYG Editor has simple and easy to use text editing capabilities of any standard word processor. It allows quick and easy content creation. In addition, it also supports a set of special capabilities to enhance content presentation and assemble content like images and pre-existing web content.

The WYSIWYG Editor supports the following basic editing capabilities:
  1. Clipboard Functions: Cut, Copy, Paste and Paste as Text         -To cut, copy and paste text anywhere in the document.
     2. Spell Check      - To give the entire page a once over spelling check.

     3. Find/Replace Text      - Enables to find a word in the page and replace the word with another word that is entered. This way a single word can be replaced or the word can be changed at                                                   all places of its occurrences throughout the document.




Return to Top

Formatting Content


The WYSIWYG Editor supports the following formatting features.

 


    1.Text Formatting: Add subscripts, superscripts, add or remove formatting
 
    2.Text Alignment: Numbered and Bullets Style, Right, Center, Left and Full Text Alignment.
      
    3.Font Formatting: Predefined heading formats, Font style, Size, Bold, Italics, Underline, Strikeout, Font color and Background color.



Return to Top

Saving Content


The WYSIWYG Editor has self-explanatory icons for page related tasks.

 

The following are the functions available

    1. Save Option: Saves the current page as a new version of the page. The View Tab is displayed after the page is saved

    2. Cancel Option: Discards edits made to the last version of the page. The View Tab is displayed showing the last version.

    3. Preview Option: Allows a saved draft or page to be previewed in a new window.

    4. Save Draft Option: Allows the edited page to be saved intermittently before the final version of the page is saved.If the page is saved as a draft, other users will not be able to                                       see the changes made.

Note: The Save, Cancel, Preview and Save Draft options have been made bold and very noticeable for SamePage 3.3 for easy usability



Return to Top

Working with Images


Images of various types can be added to a page. Images are uploaded as attachments and then embedded into the current page. Clicking the image icon   on the WYSIWYG Editor toolbar displays an 'Insert/Modify Image' window.

To add an image to a page:

  • Identify an image to be used, in one of the following ways:
  • Specify a location (URL) in the Image URL textbox.
  • Attach any locally available image using the Browse and Attach options.
  • Select any image from the list of attached images in the Select an attachment drop down. All attached images are listed in the Select an attachment drop down.
  • If required, click the Preview button to preview the selected image in the Image Preview pane.
  • If required, enter an image description in the Alternate text box.
  • If required, change the available image display attributes.
  • Click OK to complete embedding the image into the page.

An option to attach just the thumbnail of the image instead of the full image is available by checking the box next to the thumbnail option.

 

To change display attributes of any added image at a later time:

  • Right-click on the image
  • Select the Image Properties option.
  • Edit the image display attributes.


 

For more information see 'Insert Images'

 

Note: Link and Image dialogs are opened as popup windows. Ensure that the security settings in your browser is set to allow  popups from eTouch SamePage.


Return to Top

Working with links

A page can include hyperlinks to content in other pages or locations.

1.To link to a page within the same project
  1. Type the URL or name of the destination page in the Internal URL/Page Title field. (or)
  2. Select an existing page from the list of existing pages. This page list can be sorted alphabetically or based on other filter criteria, for easier searching.
2.To link to a New (Wanted) Page within same Project

Placeholder links can be added to link to wanted pages. To add a placeholder link, enter a new page name in the internal URL/page title text box. The required page will be created as a wanted page and will be displayed in the list of pages for the current project.

3.To link to a page in a different project
  • Click on 'Show Projects' to get a list of all projects within the domain.
  • Click on a specific project to list all its pages within that project.
  • Select the specific page to be linked.

 

4.To link to page attachments: 

  • Click the     icon against any listed page to display all its attachments.
  • Select an attachment from the list.
5.To link to an external webpage:
  • Enter or paste a well-formed URL in the 'External URL' text box.

Every page has a 'Short URL'  that can be seen towards the end of the page.

 in SamePage 3.6 the short URL can be copied and pasted on to the 'Internal URL/Page Title field' on the 'Insery/Modify Link' pop up window. This makes the process easier as the user need not  search  for the page from the list of projects and pages available.

For example if Page A of Project A has to be linked to Page Z of Project B. Then the short url of Page A can be copied and pasted instead of browsing for Project A and then locating Page A.

 

For more information see 'Insert/Modify Links'

 

Note: Link and Image dialogs are opened as pop-up windows. Ensure that the security settings in your browser and toolbars is set to allow pop-ups from eTouch SamePage.


Return to Top

Working with Tables


Tables can be added to pages to simplify and structure the page content.The WYSIWYG Editor toolbar had many useful table handling features to create and alter tables .
They are as follows.

  • To add a new table click on the    button in the toolbar. Once this is clicked, the third line on the toolbar is activated.
  • To change the table properties, position the cursor anywhere in the table region and click the   button, or right click on the table and use the context menu.
  • To change the row properties, click on the  icon.
  • To change the column, click on the   icon.
  • To append a new row in table, press TAB key when the cursor is in last cell of the table.
  • To add a new row before current row, use  icon.
  • To add a new row after current row, click the  icon.
  • To add a duplicate row before the current row, click the  icon.
  • To add a duplicate row after the current row , click on the  icon.
  • To move the current row up, click the icon.
  • To move the current row down, click the icon.
  • To delete the current row, click the icon.
  • To insert a new column before current column, click the  icon.
  • To insert a new column after current column, click the  icon.
  • To move the column right, click the  icon.
  • To move the column left, click the  icon.
  • To merge more than one cells, select the cells and click the  icon.
  • To sort the data in table click the  icon.
  • To delete a table, click the   icon.
  • To clean a table, click the   icon.
  • To merge tables, click the   icon.
  • To split a table , click the   icon.

Return to Top

Working with Anchors

The WYSIWYG Editor allows the user to link different pages or different parts of the same page using hyperlinks and anchors.

To add an anchor anywhere in the content, click on the button in the toolbar, and enter the name of the anchor in the dialog box. To link to this anchor from any other place in your content, click on the icon, and enter  #anchorname in the URL field.


Return to Top

Highlighting with Panels

Panels can be inserted into any part of a page to hold information that needs to the highlighted.
It can be inserted by clicking on the  icon. Then information can be added in the panel by clicking inside the panel.

Return to Top

Plugins

Plugins allow digital content from an internal or external page to be added to the current page.

Plugins can be added to a page in two ways:

  • As Insert plugins. 
  • As included Page or URL plugins. 

SamePage provides a set of out-of-the-box plugins  to enhance page content. Click here for more information about the different types of plugins and their syntax.

To add any plugin to a page:

  • Click the Insert plugin icon and from the drop down box choose the type of plugin. Click on the plugin type and the plugin syntax for that plugin automatically appears with all the necessary to provide parameters.
     

  • Click on Include a Page or URL icon available on the WYSIWYG Editor toolbar to enter the url or page to be included.

For more information on plugin types and syntax click here

 

Return to Top

Adding Emot-icons

Emotion icons can be added to any part of the page by clicking in the   icon on the WYSIWYG Editor toolbar. This pulls up a window with different emot-icons from which the user can choose to insert.

Return to Top

Editing HTML and Wiki Markup

The WYSIWYG Editor allows two editing options in addition to normal text editing:

  • Wiki Text: To edit Wiki markup
  • HTML: To toggle and edit content in HTML mode


Wiki markup editing can be done in a Wiki text area. Multiple Wiki text areas can be added to a page.

All content within the Wiki text area is parsed as Wiki markup.


To add a Wiki text area:

  • Click the   icon. A colored Wiki text area is inserted on the page.
For more information see Wiki Markup Syntax

Return to Top

Adding contents from excel and word documents

The WYSIWYG editors allows the user to insert the contents of an excel spreadsheet and a word document by clicking on the icon or the icon respectively.
Note: Please make sure that the name of the Word document that is to be imported does not contain the "#" or "%" symbols.

Return to Top

Link Attachement

An attachment can be added to a page through the 'Link Attachment' function. Click on the  icon, this opens up a pop-up window where the user can browse and attach any file. Once the file is attached, click on 'OK.'  Once the page is saved, click on the 'Attachment tab' to view the list of attachments.

For more information see Link Attachment

Return to Top

Insert Math equation Image

Math equation can be inserted onto a page by using the math editor.  The math editor allows the user to insert both simple and complex mathematical expressions and equations.Click on the  icon to open the math editor.Through the math editor the user can form a mathematical equation or expression with uppercase and lowercase greek alphabets,binary operators, math mode accents, delimiters etc. Once the expression or equation is completed, click on 'OK' and then 'Insert'. The math expression is then displayed on the page and attached to the page as a .png file. This image can be downloaded from the attachments tab.


Return to Top

Keyboard Shortcuts


The WYSIWYG Editor allows the following key combinations for quickly performing common editing tasks:

  • CTRL+A -- Select all
  • CTRL+B -- Bold
  • CTRL+I -- Italic
  • CTRL+U -- Underline
  • CTRL+S -- Strike through
  • CTRL+L -- Justify left
  • CTRL+E -- Justify center
  • CTRL+R -- Justify right
  • CTRL+J -- Justify full
  • CTRL+1 to CTRL-6 -- Headings (<h1> .. <h6>)
  • CTRL+S -- Quick Save and continue editing
  • CTRL+P -- Save and publish
  • CTRL+D -- Save Draft and Preview
  • CTRL+K -- Link
  • CTRL+G -- Insert Graphics (Image)
  • CTRL+F/H -- Find/Replace
  • CTRL+F11 -- Full screen/minimize editor
  • F7 -- Spell Check
  • F1 -- Editor help


Return to Top

Related links  Simple editor help