Skip to main content
The NCI Community Hub will be retiring in May 2024. For more information please visit the NCIHub Retirement Page:https://ncihub.cancer.gov/groups/ncihubshutdown/overview
close

Tips for CKEditor Formatting

Tips for CKEditor Formatting

CKEditor is the word-processor that NCIP Hub uses in most text entry areas (resources, group pages, blogs, etc.), except for in wiki spaces, where wiki syntax is used. The intent of this wiki article is to give tips on formatting and customization of content appearance using CKEditor. Members are welcome to contribute their individual suggestions to this wiki article.

Getting rid of hard to delete spaces

Use the “show blocks” button to see the formatting boxes and divisions. Place your cursor within a box and hit backspace to delete that respective space.

blocks.jpg

Macro for embedding YouTube videos

If there is a YouTube video you would like to embed into your page, for example http://www.youtube.com/watch?v=FgfGOEpZEOw, copy the portion of the URL following the ‘=’ into this macro: [[Youtube(Insert Here, 640, 380)]]. 640 x 380 are the dimensions, which you can change to your preference

Anchors

Anchors are used to take you to any part of the page. For example, if you click on the hyperlink for ‘Targets on Cell Surfaces,’ you will be taken to the part of the page that features that topic (see images).

anchor_1.png —> anchor_2.png

To create this, you have to work backwards. First place an anchor where you want your link to take you by clicking on the flag button.

anchor_3.jpg

Then right click the flag that you just inserted and a box will appear. Give it an anchor name.

anchor_4.jpg

Now go to the text you want to hyperlink so that it takes you to this anchored location. Highlight the text you would like to hyperlink, right click it and select ‘hyperlink.’ From the drop-down menu, select ‘link to anchor in text’. Select the keyword you entered from the drop-down selection to pair the anchor words to the location of the flag.

anchor5.jpg

Page Dividers / Horizontal Lines

Enter a couple of -‘s to generate a line that goes across the page for a divider

Uploading Images

Send an image to the server before hitting “ok” when uploading an image. Remember if you copy and paste things from one group page (like a test page) to another live group page, the photos need to be re-uploaded. It may appear that they were copied over in the editor, but they will not show up on the site.

send_to_server.png

Columns

When you want to create columns (like 3 columns for images), include placeholders to make formatting easier. You have the option to center these placeholders. You can then delete the placeholder text and insert your own text or image

columns1.jpg.png

columns2.jpg

Created on , Last modified on