The WYSIWYG editor

n-gen.net CMS uses the popular CKEditor ver. 4.x provided by CKEditor.com

The CKEditor is a What-You-See-Is-What-You-Get (WYSIWYG) editor, and it's robust, it's easy to operate. it's free and it's very well documented. Except for a few minor modifications and tweaks n-gen CMS runs the standard ver. 4.20. This version runs flawlessly in almost any browser on any device.
 

What you can do with the CKEditor ver. 4.x in your n-gen.net CMS

The list below is covering most — but not all — of the actions that you can perform with the Editor.

Basic Text Formatting

  • Bold, 
  • italic, 
  • underline, 
  • strikethrough, 
  • subscript and 
  • superscript

Text Alignment

  • Left,
  • center, 
  • right, 
  • justify

Text Styles

  • Apply paragraph styles (Normal, Heading 1-6)
  • Inline styles (like font size, colour)

Code snippets

  • Insert and edit code snippets,
  • Make language specific syntax highlighting of code.

Special characters

  • Pick special characters from customisable char map dialogue

Lists

  • Numbered lists, 
  • Format numbered lists (start number, format as roman, alpha and decimal)
  • Bulleted lists,
  • Format bulleted lists (circle, disc, square)

Links

  • Insert, 
  • edit, 
  • remove hyperlinks,
  • insert, edit and remove anchor tags,
  • insert, edit and remove MailTo links,
  • format links as phone numbers for mobile devices,
  • create popup windows for links.

Images

  • Insert images,
  • set image properties (width, height, spacing, alignment, title, style, etc.)

Video

  • Insert videos and set control properties.

File uploads

  • Upload images/files directly from the computer requires via integration to the Rich File Manager.
  • Browse, select and see preview of server side (already uploaded) images.

Tables

  • Insert tables and perform basic table editing
    (add/remove rows, columns)
  • Advanced Table Tools like merging cells, advanced table styling, etc.

Block Elements

  • Show block elements,
  • Blockquote.

Horizontal line

  • Insert a horizontal line.

Undo/Redo

  • Standard undo and redo functionality

Clipboard Support

  • Cut, copy, paste.

Source Code View

  • View and edit the underlying HTML code
  • Highlight elements in WYSIWYG and view highlighted elements in Source View.

Find/Replace

  • Basic find and replace within the editor content

Spell Checking

  • Multilingual integrated spellchecking.

iFrames

  • Insert iFrames,
  • Set properties of iFrames.

Maps

  • Insert "live" Google Map in iFrame,
  • Set map properties.

Charts

  • Insert Pie, bar, polar, line and donut charts,
  • Set chart values,
  • Set size of the chart.

Smilys

  • Insert smilys and symbols from a (customisable) dialogue

Templates

  • Insert predefined and custom templates.

DIV tags

  • Select predefined DIV tags for layout,
  • Insert, edit and remove custom DIV tags.

 

 


It is very easy to copy content from Word or PDF documents and from other websites -- and please do!
... but before you indiscriminately simply copy and paste text and graphics from various sources you should consider...

  1. Is the material copyrighted? Just because you can view something on the internet it does not automatically means that you can copy and re-publish it. If in doubt you should ask permission to re-use content. Maybe all the original author requires is that you mention the source on your page - give credit where credit is due! Maybe you will have to pay royalties for the content?
     
  2. When inserting an image on your website from another website (using the original URL as the link) you should be aware that the owner of that website is not obliged to inform you if the image is moved, updated or deleted. If that happens it might break the beautiful layout of your page. Instead you should obtain permission from the owner to use the image, make a copy and store it in your own website's file system. Then you can also re-size the image to suit your layout and make sure that it will remain a nice part of your web page for as long as you want!
     
  3. When copying text from an external source the text will often be formatted in some way or another.
    The below text is from a Danish MS Word document in docx - format. It might look fine in your browser (it does in mine but that is probably because the inline styling is overuled by n-gen.net CMS styles?!) but it might be interpreted differently - text in red - in another browser.
    The text reads:

» Tilmelding bindende, der skal mindst 30 deltagere til for at turen bliver til noget. «  

 

In reality the source HTML code look like this:

<span style="color: #FF0000">
  <span style="line-height:107%">
    <span style="font-family:&quot;Arial&quot;,sans-serif">
      <span lang="DA" style="font-size:14.0pt">
        <span style="line-height:107%">
          Tilmelding bindende, der skal mindst 30 deltagere til for at turen bliver til noget.
        </span>
      </span>
    </span>
  </span>
</span>


What it should look like is this

Tilmelding bindende, der skal mindst 30 deltagere til for at turen bliver til noget.

What you can see above is that if you are not careful when inserting copied text you might get a lot of unnecessary (and unwanted!) formatting accompanying your text. The text you want is 1 line containing 84 characters. Instead you get 376 characters in 11 lines!
It is unwanted because it will make it harder to fit the text into your page style and it makes the code heavier, it more than quadruple in size
→ more bytes to process for the browser
→ longer time to render
→ bad user experience. 
And as you can see MS Word is not  "Word Perfect" when it comes to formatting text: The <span style="line-height:107%"> tag is repeated twice; pure redundancy!
Try to avoid that... ;-)

 

What the WYSIWYG editor is not...

 

  • The editor is not a word processor like MS Word, Libre Office Write or similar bespoke word processors.
     
  • It is not suited for documents intended for paper prints or electronic documents saved as PDF documents.
    However it is possible to print a web page (with customised print styles) and you might use the "Export to PDF" function of the editor to save a specific page as a PDF document. 
     
  • The WYSIWYG editor is not suited for selecting you default font, for setting line heights or defining the overall layout of your pages. There are smarter ways of doing that.
    However, you can format the text size, font, colour, etc. using the editor but it is often not the easiest way of achieving the right Look & Fell of your pages and it is a quite bad approach seen from a maintenance perspective.
     
  • A decade or two ago it was common to use tables for "making columns" and writing text and inserting images in these columns. With half of your visitors using a mobile device this often results in a very bad user experience. So don't use the editor for making columns. Use one of the built-in templates instead.
    If you decide to make a table be sure to let the width of the table and columns be set in percent: You never know how much "real estate" the visiting browser has.






    Even if you think using the editor is as easy as using a word processor (like the Microsoft Word program) you should remember that the editor helps you write HTML »tags« and format the page with the proper HTML code. This means that you can customise the text; colours, sizes, fonts, etc. on every page just the way you like it.

    But... you shouldn’t!

    Instead you should use the Style Assistant to format the standard text sizes, colours, font and similarly you can format different headings, link, etc. 

    If you use the Style Assistant instead of customising the text in the editor you can change the Look & Feel of every page on your website with just a few clicks.


















Watch this video for general use of (an older version of) the Editor.











 

 


 

...

 

 

Last updated 20-04-2025 13:42:18