Tips for CKEditor Formatting
Search
- Version 33
- by (unknown)
- Version 34
- by (unknown)
Deletions or items before changed
Additions or items after changed
| 1 | ==Tips for CKEditor Formatting== | |||
|---|---|---|---|---|
| 2 | ||||
| 3 | '''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. ''' | |||
| 4 | ||||
| 5 | ||||
| 6 | ===Getting rid of hard to delete spaces=== | |||
| 7 | 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. | |||
| 8 | ||||
| 9 | [[Image(blocks.jpg, 500px)]] | |||
| 10 | ||||
| 11 | ||||
| 12 | ===Macro for embedding {{{YouTube}}} videos=== | |||
| 13 | 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 | |||
| 14 | ||||
| 15 | ||||
| 16 | ===Anchors=== | |||
| 17 | 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). | |||
| 18 | ||||
| 19 | [[Image(anchor_1.png, 300px)]] --> [[Image(anchor_2.png, 300px)]] | |||
| 20 | ||||
| 21 | 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. | |||
| 22 | ||||
| 23 | [[Image(anchor_3.jpg, 300px)]] | |||
| 24 | ||||
| 25 | Then right click the flag that you just inserted and a box will appear. Give it an anchor name. | |||
| 26 | ||||
| 27 | [[Image(anchor_4.jpg, 300px)]] | |||
| 28 | ||||
| 29 | - | 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 |
+ | 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.
|
| 30 | ||||
| 31 | [[Image(anchor5.jpg, 300px)]] | |||
| 32 | ||||
| 33 | ||||
| 34 | ===Page Dividers / Horizontal Lines=== | |||
| 35 | Enter a couple of -'s to generate a line that goes across the page for a divider | |||
| 36 | ||||
| 37 | ||||
| 38 | ===Uploading Images=== | |||
| 39 | 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. | |||
| 40 | ||||
| 41 | [[Image(send_to_server.png, 500px)]] | |||
| 42 | ||||
| 43 | ||||
| 44 | ===Columns=== | |||
| 45 | 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 | |||
| 46 | ||||
| 47 | [[Image(columns1.jpg.png, 500px)]] | |||
| 48 | ||||
| 49 | [[Image(columns2.jpg, 500px)]] | |||
| 50 | ||||