WYSIWYG editor “states”

The article editor is a third party plugin called JCE. It allows you to easily insert formatted text without needing to know HTML. It is very much like using MS Word or similar word processing applications. The text entered in WYSIWYG mode is “converted” to HTML to display on your site. The editor makes formatting this text easier.

There are two states for this editor.

  1. The WYSIWYG editor will display icons and buttons above the main text box for formating text.
  2. The code editor has no formatting icons or buttons above the main text box. This is how you can tell which state of editing you are currently using. If there are no buttons or icons, you are in “code view”. In code view you must type raw HTML to format text.

To switch between these two states you click the [toggle editor] link above the text box. This toggled state is “saved”. If you are in code view when you close an article, the next time you edit or create a new article it will be displayed in code view. That state is remembered.

If you see the buttons and icons you are in the WYSIWYG editing state. You can apply bold, italics, heading styles, etc just by clicking buttons. In most situations for all of the other articles you will be creating or editing you should be in the WYSIWYG mode.

Only when editing video articles will you switch between both states.

 

Follow these instructions:

  1. Go to youtube and load the video you want to link to.
  2. Below the video on Youtube, click on the “Share” link and then click the “Embed” link next to the “Share this video” link
  3. Copy the code displayed.
  4. Return to the new article page of your site or click the “Add Videos” link on right after logging in to your site. Fill in the title and select the “Video” category.
  5. Make sure you are in the WYSIWYG view of the editor FIRST. Check the article editor display. You need to see the editing icons and buttons for the next important step. If you don’t see the editing icons click the [toggle editor] link.
  6. Click inside the text box
  7. Click the Read More button below the text box. You will see a “blue” or possibly “gray” horizontal bar appear at the top of the text editor.
  8. Now click the [toggle editor] link to switch to code view.
  9. You should see the following code in the text box:

    <hr id=”system-readmore” />

Its important that the content is correctly placed before or after the read more separtor as described below. Articles using a “Read More” separator display text based on the “Intro Text” and “Full article Text”. Intro text is ABOVE the read more separator you just inserted, full article text is BELOW the read more separator.

Category “Blog” layouts

On the main Videos page, all of the articles are displayed in a grid layout. This is a special type of Joomla menu item type called a Category Blog Layout. In a blog layout all of the articles of a category are displayed in a grid layout. If an article has a read more separator, then only the INTRO text is displayed. When you click the title to view the full article text, then only the text BELOW the read more separator is displayed. Normally with a regular text article you can simply insert a read more using the WYSIWYG editor view and continue typing and formatting normally. In order to insert the Youtube embed code and thumbnail image we need to do this using the code view.

With that explanation completed we can continue to the final steps.

  1. In code editing view, make sure the cursor is AFTER the read more separator text. You need to paste the Youtube embed code AFTER the read more.
  2. Press the return key, then paste the Youtube embed code.

To insert the thumbnail image follow these steps:

  1. copy the following code snippet:

    <img class=”uk-align-left” src=”http://img.youtube.com/vi/YOUTUBE_ID/1.jpg”>

  2. Move or place the cursor ABOVE the read more separator and paste (you are stil in code view. This is an HTML image tag).
  3. Press return to place the separator on the next line
  4. Now look for the Youtube video ID code in the embed tag code pasted previously:

    <iframe width=”420″ height=”315″ src=”//www.youtube.com/embed/VIDEO_ID_HERE?rel=0″ frameborder=”0″ allowfullscreen></iframe>

  5. You should be able to simply double click the code in that spot that is in bold and copy it. You should not copy whole embed tag, only the code indicated in bold from the embed code pasted previously.
  6. Now double click the VIDEO_ID_HERE in the image link code you pasted previously and paste the video code.

    <img src=”http://img.youtube.com/vi/VIDEO_ID_HERE/1.jpg”>

 

Here is what you should see in the text box:

<img class="uk-align-left" src="http://img.youtube.com/vi/VIDEO_ID_HERE/1.jpg" alt="" />
<hr id="system-readmore" />
<iframe width="420" height="315" src="//www.youtube.com/embed/VIDEO_ID_HERE?rel=0" frameborder="0" allowfullscreen></iframe>

Adding additional test

To add any additional text, click the  [toggle editor] link to return to the WYSIWYG vide. Place the cursor either above the “read more” sepator bar, and insert additional intro text, or below the separator to add text to appear on the full article page only.

To make this simpler, you can just copy the block of code below and paste it in code view into a new article, replace the youtube video ID shown in bold, switch back to WYSIWYG view and change the intro and full text you will see above the thumbnail and below the embedded video box.

<img class=”uk-align-left” src=”http://img.youtube.com/vi/VIDEO_ID_HERE/1.jpg” alt=”” />
<p>This is where intro text should go. Switch to WYSIWYG view, place the cursor below the image, hit return and start typing. This text will only show on the main video page in the blog layout view below the video thumbnail</p>
<hr id=”system-readmore” />
<iframe width=”420″ height=”315″ src=”//www.youtube.com/embed/VIDEO_ID_HERE?rel=0″ frameborder=”0″ allowfullscreen></iframe>
<p>Full Article text should go after the read more separaator. Switch to WYSIWYG view, place the cursor below the embedded video “box” and start typing</p>

 

These instructions apply to ALL ARTICLES. Using the read more separator creates an automatic “read more” allowing you to have intro text when in a category blog view (blog, news, videos, photos). If you don’t use a read more separator ALL of the text will be displayed for each articl in the grid blog layout.  Using a read more allows you to have short intro text or teaser text. (The only difference is that you don’t need to switch to code view for regular articles. Code view is only required when pasting the youtube embed code.)

.