What’s new in the CMS text editor
If you’re a Noisegate CMS user, you may know that the text editor we use is an open source one called CKEditor. There has recently been a big update to the way CKEditor works so we’ve installed the newest version in the CMS. The new version has some new features and some improvements to some of the older ones.
This article will take you through the changes as well as some of the old features you may not know about.
The following options are available in the CMS, depending on how your site works these may not all be available to you and they aren’t all available in all areas of the CMS.
- Paragraph Format
- Remove Format
- Block Quote
- Align Left, Centre & Align Right
- Insert/Remove Numbered List & Insert/Remove Bullet List
- Spell Check As You Type
- Insert Poll
The Full Toolbar
Normal is used for your standard paragraph text, this is what the majority of your page will be made up of.
Heading 1-4 – these are used to style the titles and subtitles on your page, you should try to only include a single heading 1 on a page as this will help with SEO.
Custom Style – this is to add a slightly different style to each of the other options in this drop down, for example if your Heading 1 is usually green, selecting part of the Heading 1 text and clicking custom style could make the selected text red.
To change the format of a paragraph, highlight the text and select the style you want. The exact styling these options will produce will depend on how your site is designed and what area of the site you are on.
The next button is the remove format button. This will remove any formatting (e.g. italic, bold or custom styling) on
the selected text and change it back to a standard paragraph.
The next two buttons are Bold and Italic. These work as you’d expect and make the text bold or italic. In the same way as with the Paragraph Format, highlight the text and click one of the buttons to make it bold or italic, click again to remove that format.
The next button is block quote, this will change the styling of the text to be a block quote, this is usually indented slightly from the left with some space above and below. To use this select the text you want and click the button.
Align Left, Centre & Align Right
The next group of buttons is for text justification, these work in the usual way, select the text you want and click the button.
Insert/Remove Numbered List & Insert/Remove Bullet List
The next buttons allow you to add lists to your page – these can either be bullet lists or numbered lists – click on the list type you want and then type the items for your list, pressing enter will create a new item.
The next two buttons allow you to add and remove links from your page. To add a link select the text you want to be the link and click the button, a new window will pop up where you can enter the details for the link.
At the top there is a drop down to let you select what type of link it is this gives the following options:
Select this if you want to link to another page on your site or a page on another site. You can then type (or copy/paste) the link into the URL box.
The protocol box will usually update to the required option when you enter the URL into the URL box. If you need to manually update it, these are the options:
- http:// This is the standard protocol for web links, if you copy and paste a link which includes http:// at the beginning this will automatically get selected and the http:// will be stripped off the link in the URL box.â€‹
- https:// This is used if the link is a secure link, this is only needed if the site you are linking to is on a secure server and uses URLs beginning with https://. Again this will be stripped of the address in the URL box if selected.
- <other> This is used for any other types of link, for example if you want to link to a page internally on your site and just type /pagename into the URL box, then <other> will automatically be selected.
Select this if you want to link to an email address. Enter the email address in the E-Mail Address box and when a user clicks the link it will open in their default email client and create a new email to the address provided. If you fill in the Message Subject or Message Body boxes, these will be prefilled with the data given.
If you have the Document Library, you can select this option to link directly to a document you have uploaded to the CMS. Just select the document you want to link to from the drop down.
If you have the Tag module, you can select this option to link directly to the search results page for a particular tag. Just select the tag you want to link to from the drop down. The drop down will list all tags currently in the system, so if the tag you want doesn’t exist, just tag some articles/news items etc, with the tag and it’ll be available to you.
If you have the keyword search on your site, you can select this option to link directly to the search results page for a particular keyword. Just enter the keyword you want to link to in the Keyword box.
If you select either the URL or Document link type, you will notice the Target tab appears. This allows you to set the link to open in a new window or tab. This can be useful if you’re linking to an external site or document. When the user clicks on the link the will be taken to the document or site in another tab so when they click the close button they are taken back to the page on your site where they clicked on the link.
Next to the Link button is the unlink button. Use this if you have inserted a link and no longer want it. Just select the link text and click the button and the link will be removed.
The next group of buttons is for inserting media into the page, the first of which is the Image button. This allows you to insert an image at the current position of the cursor. When you click the button a new window pops up allowing you to set options for the inserted image.
The first tab is the Image Info tab, this allows you to select the image you want and set some formatting for how it is displayed.
The Image drop down box at the top lets you select the image from the ones you have uploaded into the Image Library in the CMS. When selecting an image, the preview box will update with that image.
The alternative text box allows you to enter some text that gives a description of the image. This text is used if the image is not available to the user of the website. There are a number of reasons that this could happen, for example the user could use a screen reader if they are visually impaired. Or the first user may have turned off images in their browser.
Width, Height, Lock Ratio & Reset Size
The next set of boxes allow you to set the height and width of the image. By default the aspect ratio of the image is locked so if you adjust the width, the height automatically changes to suit. If you want to change it so you can specify the height and width, without keeping the aspect ratio the same, you can click the Lock Ratio button.
If you make some changes and decide you want to revert to the original image, you can click the reset size button.
If you want to add a border to you image you can enter the number of pixels for the border here.
HSpace & VSpace
You may want to add some space around your image so the text doesn’t sit right next to it. You can do this by entering the number of pixels space you want into the boxes for HSpace (horizontal space – to the left and right of the image) or VSpace (vertical space – above and below the image).
If you want the image to sit within the text and to have the text to wrap around it, set the Alignment to either Left or Right. Left will position the image on the left of the page with the image wrapping around the right hand side. Right will do the opposite.
The link tab allows you to add a link to the image or to set the image as a Lightboxed Image.
If you want to set the image to link to another web page, enter the address in the URL box. You can also set the Target to be a new window (as discussed above in the links section).
You can also select to display the image in a lightbox, this means that when it is clicked, the image will be displayed at a larger size in the centre of the screen with the rest of the screen darkened.
The first drop down will let you select the image to be displayed in a lightbox. When you do this you have 2 options, you can either select the image to be a single lightboxed image, or you can select it to be part of a lightboxed group. If you select a number of images on a page to be part of the same Lightbox group, when the user opens one of them in the Lightbox, they will be able to scroll through the other images in the same group.
If you enter some text into the lightbox caption box, this will be displayed under the image when it is viewed in the lightbox.
The next button in the media group is the Video button. This allows you to embed a youtube or vimeo video onto the page. For details of how to do this see my previous blog post: How to embed YouTube or Vimeo videos using the Noisegate CMS.
The top box in the window lets you select the mp3 file you want to embed, it will list all mp3’s uploaded into the media module.
You can set the audio to either autoplay or loop by selecting the relevant boxes.
If you want to insert a table onto the page to display data in table format you can by clicking the table button.
Select the number of rows and columns you want for your table. Don’t worry if you get the wrong number you can always add or delete them later.
You can select if the first column, first row or both contain headers for your table. These can be styled in a different way differentiate them from the rest of the data to make the table easier to read.
Set the width (in pixels) you want the borders on the table. If you don’t want any borders displayed, set it to 0.
Note: if you do set the borders to 0, there will be dotted lines displayed in the CMS to show where the table and cells are but these won’t be displayed on the website.
If your table isn’t the full width of the page, you can se the alignment to be Left, Right or Centre. If you select Left or Right, the text will wrap around the table.
Use this dropdown to select one of the predefined widths for your site. If you want to add a table and don’t have an appropriate width, send a message to one of the Noisegate team and we can add it for you.
You can adjust the space between cells in your table by adding Cell spacing. Enter the number of pixels space that you want.
Cell padding is the amount of space within a cell between the edge of the cell and the contents. Enter the number of pixels padding that you want.
If you have the Polls Module, you can insert a Poll anywhere on a page through the CMS. To do this; place the cursor where you want the poll and select it using this drop down.
Spell Check As You Type
The next button is the Spell Check button. By default Spell Check As You Type is enabled, when you spell a word incorrectly, it is highlighted with a red underline. You can then right click on the word to see a list of possible spellings. The default language is British English. If you want to change the settings or turn Spell check as you type off, you can click the button to display a menu.
The from here you can change the options and language.
There are 4 options here:
- Ignore All-Caps Words
- Ignore Domain Names
- Ignore Words with Mixed Case
- Ignore Words with Numbers
Check the boxes next to any of these you want to turn on.
Select the Language you want to use by clicking the radio button next to it.
If you want to check the spelling of the whole page you can click this to open a new window which goes through each incorrect word and gives you the options you can change it to.
The final button in the toolbar is the Source button, clicking this will show the full html source rather than the WYSIWYG editor. This is turned off by default for most sites.