Some Tips for Using the Online Editor

toggle-button

This site uses the CKeditor online editor built into our Drupal CMS to allow users to create or edit articles.

This is a WYSIWYG HTML editor that uses a Microsoft Word style toolbar so editing is both easy and familiar for most users. No knowledge of HTML is required, though HTML experts can, if they wish, click the "Source" button in the editor to edit the HTML directly.

The editor is only available to Category Editors and other privileged users such as moderators and site admins.

Site visitors have no access to the HTML editor at all. They are only offered a plain text editor.

This article is not a reference manual on using the CKeditor online editor. You can find that here. Instead, I'll show you a few handy usage tips:

 The correct way to import text

You don't need to write your review or article online using the online editor. You can do so if you wish, but most users find it easier to write offline using an editor with a spell checker.

Writing offline has another advantage: you have a copy of your work in the event something goes wrong. When writing online it's all too easy to hit the wrong key and lose all your work.

If you choose to write offline we strongly recommend using a plain text editor like Notepad - or much better, one like NoteTab Lite that unlike Notepad does not introduce hard linebreaks that wreck the final formatting.  The formatting commands built into word processing programs like Word or WYSIWYG html editors like Frontpage can seriously conflict with the formatting of our website as determined by our Drupal theme and style sheets, with the result that either the page formatting is wrong or the code is faulty, leading to code validation failures.

So we recommend you create your articles offline in plain text, copy and past them into the online editor and then format the article using the online editor.

However, there a few tricks you need to know:

If you use a plain text editor like Notepad to create your review, make sure you don't have hard line breaks at the end of each line because this will mess up the format of your online review. If you do have hard line breaks, remove them and let the text wrap naturally. You can do that using this free web service.  Hard paragraph breaks are fine.

If you really must use an offline WYSIWYG editor like Word then save the file as a plain text file (.txt) when you have finished and then copy and paste the contents of the plain text file into the online editor. If you paste Word docs into the CMS they wreck the page code and cause many errors.

For those of you who have already have their reviews on our website and have accidentally embedded font information, you may be able to correct this by using the Drupal online editor's "Paste from Word" option.  Just edit your review, click inside the article body box,then select the text containing formatting and use then Ctrl C to copy it. Then click the "Paste as Plain Text" icon in the toolbar and paste the copied text back into the popup window using Ctrl V. The embedded fonts will usually, though not always,  have been removed.  Just save and exit.

A word of warning

If you type your review directly into the online editor, or are making a lot of editing changes,  I suggest you save your work often as it is not uncommon to hit the wrong key and lose everything. In particular, accidentally clicking on a link in your review will result in the browser opening the linked page and all your work will be lost.  So please save often. Heed these words!

How to insert a single line break

In the  online editor, pressing Enter creates two line breaks. This is fine for separating paragraphs, but is an annoyance if you want to construct a list with only single breaks like this:

Item 1
Item 2
Item 3

Doing this is simple: just hold down Shift when you press Enter. You'll then get only one line break, not two.

How to create a link to a website

Highlight the text you want to link.  Then click the Insert/Edit link icon  in the online editor toolbar. Enter the website address you want to link to in the URL box, then set the link to open in a new page by selecting "New Window_blank" in the "Target" tab Click OK and that's it, the link has been created. The link opens in a new tab or new window, so our site page stays open in the original tab / window.

How to create a link to a page in this site

First, find out the address of the page in this site you want to link to. To do that, navigate to the page and look at the URL in your browser address bar. The address will be in one of three possible forms.  All you are interested in is the bit at the end after the ".com/". Depending on the form of the URL, write down just the portion indicated below:

1. http://www.techsupportalert.com/node/xxxx =>   write down /node/xxxx

2. http://www.techsupportalert.com/xxxx.htm   =>    write down /xxxx.htm

3. http://www.techsupportalert.com/xxxx         =>    write down /xxxx

Now go back to your review and edit it. Select the text you want to use to create the link, and then click the Insert/Edit link icon  in the online editor toolbar.  In the pull-down Protocol menu, select <other> and type the page address you want to link to in the URL box, and click OK. That's it; the link has been created.

How to create a link to a bookmark in your article page

This is the technique we use in the reviews on this site to link a product name to the product details at the end of the review. There are, however, other uses.

Often, with a long article, it's handy to create a short table of contents at the start of the article with each item linked to a point further down the page.

This is commonly used for things like FAQ lists but there are many other applications. Indeed this article itself makes use of this feature.

Creating internal links is a two stage process: first you need to create bookmarks (AKA "anchors") at the appropriate points in your article. Then you need to link to these bookmarks.

To create a bookmark, go to the point in your article where you want to link. Then click the Insert/Edit Anchor icon  on the online editor toolbar. Give the bookmark a name; it can be anything: "1", "item1", "paragraph 4," whatever. Just remember that each bookmark in the page must have a unique name.

When you have created your bookmarks, highlight the text you want to use to link to the first bookmark. Then click the Insert/Edit link icon  in the online editor toolbar.  From the Link Type drop-down menu select "anchor in the text."  Then use the pull-down menu "Select an Anchor by Anchor Name" to select the Bookmark you want to link to. Click OK, and you are done. Repeat for each bookmark.

 

toggle-button

Comments

"Note: do not have a "/" at the start of your URL; it will not work" Is that an accurate statement?
Yes, MrBrian, it's accurate. The path module automatically adds a slash to your URL alias. Typing another slash at the beginning of the URL alias results in double slashes and it won't work.
As a test, I added a link to pc/security-tools.html without a slash in front. The resulting URL https://www.techsupportalert.com/content/pc/security-tools.html is incorrect. It works fine however with a slash in front. Furthermore, it seems that every Gizmo link in our article has a slash in front. I'm not sure why I'm getting different results from the documentation.
My apologies MrBrian. I mistook this for the way it works when we create a URL alias. You are absolutely correct in this case about adding a leading slash to a relative URL used on a review page. Things could have been changed when the online editor was upgraded. Thanks for bringing this up and the documentation has now been updated to reflect how it works.
You're welcome, and thank you for changing the article. It could be condensed a bit more perhaps by replacing "1. [...] 2. [...] 3. [...]" with something like this: "http://www.techsupportalert.com/xxxx => write down /xxxx"