Rich Text Editing

Learn how to edit and create your amazing content here. The content editor is a powerful tool full with rich features which you will learn here.

You will see an editor quite a lot when you are editing or creating content. This learning covers all the available features and how to create content using this rich text editor

  1. Basic Editing

  2. Advanced Editing

    Try a few advance features like Accordion, FontAwesome, Code Block etc.

  3. Markdown Editing

  4. Rich Multimedia Content

    Add Youtube, Instagram feed or even soundcloud songs

  5. Uploading images

    Images are super easy to upload, you can

        • simply copy paste the image into the editor. (Yes, that's true. Just copy from your computer using standard copy command and paste it inside the editor)
      • upload using the File Manger in the "Browse Server" option of the image plugin
      • drag and drop into the editor.


    ** The supported image type is jpg and png file format only.

  6. List of Blocks with Editor

    Check the Blocks which supports Rich text editing here.

Okay, lets cover this in a bit more detail here.

WYSIWYG (Rich Text Editor) Basics

The Basic plugins and features in the toolbar.

RTE.png

 

Zoomed in

RTE1.png

 

RTE2.png

You can directly copy and paste your content from Word, Evernote, mac Notes here in this editor.

Advanced Editing

Wanna add Fontawesome Icons?

         -- Look for  in the Editor toolbar. fontawesome.png

 

 Try the Collapsible Item Accordion-list.pngfor putting some collapsible content or group the list using the Accordion List AccordionList.png


Screen Shot 2017-11-11 at 12.17.21 pm.png

How about a Code Block?

        -- Add using Code Snippet tool Code-snippet.png

Screen Shot 2017-11-11 at 12.15.05 pm.png 

Markdown Editing

markdown.png

    Markdown is a way to write content for the web. It’s written in what  nerds like to call “plaintext”, which is exactly the sort of text you’re used to writing and seeing. Plaintext is just the regular alphabet, with a few familiar symbols, like asterisks ( * ) and backticks ( ` ).

Unlike cumbersome word processing applications, text written in Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academicsscientistswriters, and many more. Websites like GitHub and reddit use Markdown to style their comments.

Formatting text in Markdown has a very gentle learning curve. It doesn’t do anything fancy like change the font size, color, or type. All you have control over is the display of the text—stuff like making things bold, creating headers, and organizing lists.

If you have ten minutes, you can learn Markdown!

In each lesson, you’ll be given an introduction to a single Markdown concept. Then, you’ll be asked to complete several exercises with that new knowledge.

Source: www.markdowntutorial.com External Link

10 mins Tutorial: commonmark.org/help/tutorial/ External Link


Online Markdown Editors 

You can also use one of the free online Markdown editors such as StackEditor to create markdown text easily and when you are finish, you can simply copy paste the text here. StackEditor also allows you to save it in your Google Drive, Local Disk to save content. Visit the link below. 

StackEditor: https://stackedit.io 


Lightbulb How it works in the Editor? 

  • To enable markdown, click on the Markdown-full icon in the editor
  • Enter Markdown text.
  • Click on the Markdown-full icon again to check the text inputted. 
  • Click on Save to save the content. 

** markdown.png is currently not supported in the Content Text Block and only on the Block which have popup window support like Popup Editor. Markdown is also supported in the Composer view of the Page. Check here for the list of blocks which have Markdown support. 

 

Rich Multimedia Content

Try our multimedia feature where you can embed videos, photos from many social media platforms. 

Look for Multimedia-content.png and input a supported URL from Flickr, Instagram, etc and see the magic.

Instagram-logo.pngFeed Example

-- Grab any of your public photo URL eg. https://www.instagram.com/p/Baj3yvAh88G/ 

- Click on Multimedia-content.png, a dialog window will pop. Pop in the URL above.

Oembed.png

-- Click OK and Save on the Content Editor 

 Screen Shot 2017-11-12 at 6.49.58 pm.png 

-- See the magic

instagram.jpg


Flickr_logo32.png 

-- Grab the public Flickr URL eg. https://www.flickr.com/photos/dreaming-outdoors/38307388332

-- Pop in the multimedia dailog box as above

-- See the magic 

flickr.jpg

 

See the supported list of platforms here


^^For geeks this is called oEmbed technology.