Follow

HTML/Text Editor (CK Editor)

The HTML/text editor in Rivista is a version of the third party application CKeditor. 

This editor allows you to create HTML formatted text easily, using visual tools.

Source tool:

sourcebutton.png
Use this tool to switch between the WYSIWYG (What You See Is What You Get) view and the source view, which reveals the HTML code formatting the text.
Paste as plain text tools:
pastetxt.png

These tools all do essentially the same thing: they strip a document of some or all formatting and paste into the document in a style that will not cause our software to choke.

If you choose to paste into the tool on the left ("Paste"), the elemental formatting, such as bolding and headers, will be left intact but there will be no obstructive formatting. We suggest using this tool.

If you want to strip all formatting, including bolding and headers, use the Paste as Plain Text tool (middle).

The tool on the far right that has the Word logo on it will strip a document of any disruptive formatting, but will leave in such elements as font size. The problem with this is that your site depends on CSS (cascading style sheets) to control the look of the site, and any inline formatting (font=6, e.g.) will override the CSS.

For example, if you have predetermined the font size of headers in all articles to be a certain font size but the Word document has them sized differently, the original sizing will be upheld and the CSS disregarded, thereby giving the document a look that does not conform with the rest of the site.
Insert/Edit Link tool:
linktool.png
This tool is used to link words or images in your article body to URLs, email addresses or other types of files such as PDFs.

To link words or images, select the text or image by highlighting or clicking on it. Then click the link tool and you will see a pop-up like this:
linkwindow.png

Under the first tab -- Link Info -- you can set the type of link you wish to make, whether to a URL, email address or an anchored text on the page.
Screen_Shot_2013-08-13_at_12.34.16_PM.png
 
 
 
If you select "link to anchor in text" you will see a list of available anchors in the document appear. You can select by either name or Element ID. 
 
 
 
 
You can create an anchor by highlighting text and clicking the flag icon in the toolbar. After you've set the anchor and named it, you can give a link to that specific place in the document by adding that anchor name to the URL preceded by a hash tag. For instance, to link to this section of this document, you can follow this link: http://help.gtxcel.com/entries/437552-Rivista-HTML-Text-Editor/#editlink
anchor.png
 
Don't worry about setting the protocol; the system does it automatically depending on what type of URL you paste in.
To link to a PDF, click Browse Server to find the place on your server where you wish to store the file. After selecting a folder, upload the PDF by browsing your desktop. This process is covered in more detail in the section discussing the Insert/Edit Image tool.
Use the Target tab to select how you would like the link to open when clicked by a user, such as if you want the link to open in a new window.

Disregard the Advanced tab. It is largely irrelevant when in use with our system.

Once something is linked, the greyed-out link tool you see above wil become darker, indicating an available state.
linktool2.png
Insert/Edit Image tool:
imagetool.png
You will use this tool to upload images into the body of your text. After you have the image sized to the desired dimensions and saved on your desk top, click this tool to upload it to the body of the article. You will see a pop-up like the following:

imagebrowser.png

In the Image Info tab, you can upload the image to the server from your desktop by clicking Browse Server. Whereas the process of uploading the first image (the lead image) was completed in one step, uploading images to the body of your article is a two-step process.

After clicking Browse Server, you will see another pop-up window like this:

chooseimage.png

First, either select the folder into which you would like to upload the image, or click Create New Folder (bottom left). I always store in-line images under the folder /images/ in a new folder that is specific to the issue (e.g. /Sept_2008/). Do not use spaces in your folder names; separate words by underscores or dashes.

At the bottom of this pop-up is a field is a Browse button that you can use to find the image on your desktop. Once it uploads, click the Upload button to the right of the Browse button. After you see the image uploaded to the folder, click on it to download it to the first pop-up we saw, shown again here with an image uploaded:
chosen-image.png
The URL field is now filled out, and you can see a partial view of the image that has been uploaded.

First, be sure to fill in the Alternative Text field with an brief explanation of what the image depicts. This field is used by text only browsers (such as those used by vision-impaired users) to read the image contents in order to enhance the user experience. This field is also used by the search engines to classify your images. Therefore, it is good to use relevant keywords here. If the image is of a chef at a local restaurant, write something like Chef Jena Wilkins of Le Bleu Cafe in San Francisco rather than restaurant chef.

You can use the Width and Height field to change the image size, but don't abuse the process. It's okay to shave a few pixels (you never want to make an image larger here; it will distort), but don't upload giant images and then size them down using this feature. The resulting image will look the right size on the site, but when your readers go to the page, they will have to download the real size of the image, and that will slow down the site.

Positioning the image:

If you do nothing, the image will sit alone in the space with no text wrapping around it. Use the left, center or right justify to place the image.

If you wish the text to wrap around the image, you may use one of two methods.
  1. Click on the Advanced tab. In the third field down on the left side, add the CSS command left-justify-pic to align left; right-justify-pic will align the image right. The padding is added automatically.
  2. The second option (less recommended) is to use the align tool under the Image Info tab. Be sure to add HSpace and VSpace (horizontal and vertical padding; measured in pixels) so that the text won't bump up against the image.

Create a link

Image_editor_link_tab.png

To create a clickable image that links to another page, click the Link tab. Here, you can:

  • Type a link into the URL field. Make sure to include the http:// at the beginning of the link.
  • Browse the server to link your image to a different image or document already in your server
  • Use the target dropdown to determine whether the link opens in a new window. If you leave this setting alone, the link will open in the same window.

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk