LinkedIn logo Find us on LinkedIn

Text Editor Features

Overview

The WYSIWYG text editor toolbar is a common CMS feature that brings familiar word processing features to your web page. It is an implementation of an open source application that is updated regularly, which means that features may change from time to time.

The toolbar will appear throughout the CMS, whenever you click into a text editing area.

For more information about the text editor tools, including advanced property options, read the CKEditor Users Guide

Editing text

Below is a quick summary of the editing features that enable you to add, edit and style your text. 

Pasting text

In most instances, text can be copied from an external application and pasted straight into your CMS article page using the common Ctrl/Cmd+C and Ctrl/Cmd+V commands, however there are occasions when you want to paste text without preserving the existing styles, or when the CMS does not interpret a style appropriately.

  In these instances you can use either of these Paste as plain text or paste from Word options. Paste as plain text will remove all formatting, whereas Paste from Word will preserve basic heading and paragraph formatting whilst removing all other Microsoft-specific style commands.

When you select either of these options a dialogue box will pop up on your screen which includes the Paste area. Once you have pasted in your text. click OK and the box will close. Your text will then appear in your CMS article for you to continue editing.

The Undo/Redo tools will undo or redo any text edit action.

  Find, Replace, Select All and Spell Check are all common word processing tools and work as you should expect them to work. All actions will be performed within a dialogue box much like the one illustrated above.

  Below is an example of the Insert Horizontal Line feature, along with the Insert Special Character tool

The image above illustrates what the Insert Horizontal Line looks like in the CMS, and the image below illustrates how this looks on the web page for this particular article (your web page may use a different line style).

Here is a quick view of the Special Characters that are available for you to insert into your article.

Styling text

Every page on your website will be displayed via a style sheet that captures all of the features of the page design. The purpose of the styling tools that appear in the text editor is to allow you to add any styles that cannot be pre-set in the style sheet. The most commonly used ad-hoc styles are numbered or bulleted lists (shown below). 

Some styling options that appear in this menu may also be pre-defined in your article style sheet. In these instances the style that you add during the editing process will not appear on the front of your website. A common example of this is text alignment; if your style sheet is set to display text as left-aligned, then changing the alignment to Justify may not work. There are four text alignment options (left, centre, right and justify) shown above.

The Decrease/Increase indent and Block Quote options may also be influence by style sheets

  Bold, Italic, Underline, Strikethrough, Subscript and Superscript are  all common styling options that are available for you to emphasise aspects of your text. The last button in this block will remove any styles that you have added.

  Text colour and background colour are two more features that enable you to add meaning to words. 

Links

  You can turn an element of your article into a link or anchor using these simple link tools.

To create a link, highlight the element that you want to link from and then click on the Link icon.

The Link Info dialogue box will then appear on your screen as illustrated below.

First select the type of link that you want to create; URL, Email or Anchor. The proceeding options will then change, depending on the option that you select.

Illustrated below is a URL link so the destination URL has been added and the pre-fix protocol set (http:// being the most common). In this example the route of the URL (www.widearea.co.uk) has been excluded because the link that is being added is to a page within the website, which is why the protocol is set to 'other'. 

The benefit of excluding the URL route for an internal link is that the link will work from both the staging and live versions of your website. It also means that you can create and test a link to a staged article without having to go back and edit the link when the article goes live, or risk publishing a link to the wrong site.

For email, the destination email address and the message subject and body can be defined.

To create a text Anchor link you should first define the anchor by highlighting the relevant word or phrase and clicking on the flag icon shown above. You are then prompted to define the Anchor name. Once you have done that, you can create a link elsewhere in the article to jump to that anchor.

The Target tab lets you control how the link is displayed by the web browser, replacing the current page or opening a new tab, frame or pop-up window etc. 

The Advanced options are used by html programmers to manipulate links within web pages. If you are not familiar with html and the fields presented within the advanced link options then please do not use them.

Images

When you add an image to your website the CMS will create several copies of each image so that it can appear in different sizes on different pages of your site. The CMS will also generate the image URL and populate the Alternative Text link with the article headline text.

The options that appear within the text editor Image Properties allow you to override the predefined functions and give you some fine-grain control over the way that manually added images appear on the page.

From the Images Info dialogue box shown below you can customise the Alternative Text for your image if you want to use something other than the default article headline.

You can also edit the size of the image by defining the height and/or the width. If you do both then it is advisable to click on the padlock in order to preserve the aspect ratio of your image and stop it from becoming distorted. The smaller of the two defined sizes will then prevail.

Adding a value to the Boarder option will frame your image to the designated pixel width, for example, if you define the boarder as 5 then the image will be displayed with a boarder that is five pixels wide.

HSpace and VSpace allow you to define the horizontal and vertical spacing around your image, and alignment lets you align the image to the left or to the right on the page.

The Link tab lets you wrap the image in a link, making the whole image clickable. Once again, Target lets you mange the way that the link is displayed.

Choose image is an alternative method of adding images to your article body to the Tools box that is displayed by the CMS. Simply select the image size that you want to use and click on the relevant image. The image will then appear in the Preview box and will be added to your article when you click OK. 

The Advanced options are used by html programmers to manipulate images within web pages. If you are not familiar with html and the fields presented within the advanced image properties options then please do not use them.

Flash

  Adding a Flash object to your article is a simple process. Here is an example of a file that we have added:

To add a Flash object to your article, simply click on the flash icon, add the URL to the hosted Flash file, and add the display parameters. Adding HSpace and VSpace will add pixel spacing around the object.

The Properties tab gives you more control over the display format of your object

Below is an overview of all Properties tab elements:

Scale

Controls the scaling, stretching, or shrinking of the Flash object when the browser window is resized (scale attribute). You can choose between the following options:

  • Show all – the entire object is visible with original aspect ratio retained. Borders may be present.
  • No Border – the object is scaled to fit within the specified area without any borders, with original aspect ratio retained (the sides of the object may be cropped).
  • Exact Fit – the entire object is visible within the specified area, but the original aspect ratio might not be retained thus making the object distorted.

Script Access

Controls the ability of the Flash object to communicate with the page it is embedded in (allowScriptAccess attribute). You can choose between the following options:

  • Always – the Flash object can communicate with the HTML page it is embedded in even if they are from different domains.
  • Same domain – the Flash object can communicate with the HTML page it is embedded in only if they are from the same domain.
  • Never – the Flash object cannot communicate with the HTML page it is embedded in.

Window mode

Controls the layering of the Flash object in the browser window (wmode attribute). You can choose between the following options:

  • Window – the Flash object is shown in its own window on a document.
  • Opaque – the Flash object hides everything underneath.
  • Transparent – the document background shows through all transparent parts of the Flash object.

Quality

Controls the relation between the speed of the object and its appearance (quality attribute). You can choose between the following options:

  • Best – best appearance, speed is disregarded.
  • High – appearance is favored over speed.
  • Auto High – speed and appearance are equally emphasized.
  • Medium – speed is favored over quality, but some anti-aliasing is applied.
  • Auto Low – speed is favored over quality, but quality is improved whenever possible.
  • Low – speed is favored over quality and anti-aliasing is never applied.

Align

Controls the alignment of the Flash object . You can choose between the following options: Left, Abs Bottom, Abs Middle, Baseline, Bottom, Middle, Right, Text Top, or Top.

The Properties tab lets you configure four additional variables for the Flash Player:

  • Enable Flash Menu – the parameter that controls whether the Flash context menu is enabled.
  • Auto Play – the parameter that controls whether the Flash object will start playing automatically right after you open the document.
  • Loop – the parameter that controls whether the Flash object will play continuously in a loop.
  • Allow Fullscreen – the parameter that controls whether the Flash object may be played in the full screen mode.

Embeded Media (YouTube)

  You can use either of these tools to add a YouTube video our other embeded media 

The first option, labeled Embeded Media from Various Sites is the easiest to use and is the most versatile. All you need to do is to paste the URL of the hosted page into the pop-up box and the tool does the rest.

If you want to check that your hosting site is supported then you can view an up to date list

If your media source is not supported then you can use the Embeded Media option with the YouTube icon to paste in your script.

Below is an overview of all Properties tab elements:
 
Scale – the parameter that controls the scaling, stretching, or shrinking of the Flash object when the browser window is resized (scale attribute). You can choose between the following options:
Show all – the entire object is visible with original aspect ratio retained. Borders may be present.
No Border – the object is scaled to fit within the specified area without any borders, with original aspect ratio retained (the sides of the object may be cropped).
Exact Fit – the entire object is visible within the specified area, but the original aspect ratio might not be retained thus making the object distorted.
Script Access – the parameter that controls the ability of the Flash object to communicate with the page it is embedded in (allowScriptAccess attribute). You can choose between the following options:
Always – the Flash object can communicate with the HTML page it is embedded in even if they are from different domains.
Same domain – the Flash object can communicate with the HTML page it is embedded in only if they are from the same domain.
Never – the Flash object cannot communicate with the HTML page it is embedded in.
Window mode – the parameter that controls the layering of the Flash object in the browser window (wmode attribute). You can choose between the following options:
Window – the Flash object is shown in its own window on a document.
Opaque – the Flash object hides everything underneath.
Transparent – the document background shows through all transparent parts of the Flash object.
Quality – the parameter that controls the relation between the speed of the object and its appearance (quality attribute). You can choose between the following options:
Best – best appearance, speed is disregarded.
High – appearance is favored over speed.
Auto High – speed and appearance are equally emphasized.
Medium – speed is favored over quality, but some anti-aliasing is applied.
Auto Low – speed is favored over quality, but quality is improved whenever possible.
Low – speed is favored over quality and anti-aliasing is never applied.
Align – the parameter that controls the alignment of the Flash object in the document (align attribute). You can choose between the following options: Left, Abs Bottom, Abs Middle, Baseline, Bottom, Middle, Right, Text Top, or Top.
 
The Properties tab lets you configure four additional options pertaining to the Flash Player:
 
Enable Flash Menu – the parameter that controls whether the Flash context menu is enabled.
Auto Play – the parameter that controls whether the Flash object will start playing automatically right after you open the document.
Loop – the parameter that controls whether the Flash object will play continuously in a loop.
Allow Fullscreen – the parameter that controls whether the Flash object may be played in the full screen mode.

Tables

  Below is an example of a table that was created using the Table text editor option, followed by a view of the table set-up dialogue box.

Example table

Heading one Heading two
one three
two four

 

In the dialogue box below the table has been defined with three rows and two columns. 

The width of the table has been defined as 100% rather than to a set pixel-width. this option lets the template do the work and size the table to fit the page width. The cell height is specified as 20 pixels.

Cell spacing is the spacing between cells, whereas cell padding is the space within each cell.

Alignment positions the table on the page, and the Caption/Summary fields allow you to annotate your table.

To edit an existing table, place your cursor over the area of the table that you want to edit and right-click. the options that appear will depend on where in the table you cursor was located when selected the edit function, for example, the option to "insert cell before/after" will only appear if you were editing a cell when you right-clicked your mouse. If you have experience of creating tables in word processing applications then these table management functions will be familiar to you.

​Once again, the advanced table properties options are for people who know what they are doing, so if you need to ask the don't do it!

Styles

  In the main, styles are defined by the website style sheet. 

Changing text from normal to  heading one or heading 2 etc will select the style for the heading that was implemented in the style sheet from your design. It will also set the appropriate title tag in the meta.

Other style options may or  may not translate to the front of your website, depending on your site design. If there is a style that you want to use but is not available within your article style sheet, then please let us know and we will do our best to include the relevant style feature.

More information is available from the CKEditor Users Guide

pdf icon

Download the pdf for Text Editor Features

Drop us a note

Where we are

wide area

Thanks for your enquiry, we'll get back to you shortly

Close

Contact us

Tel: +44 (0)20 7631 9280

Email: info@widearea.co.uk