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
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...
- 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?
- 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!
- 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:"Arial",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... 
...