TinyMCE Walk through

TinyMCE Walk through
Buy    $12.00

Version 1.01
Author WannaCo
License: ImpressPages
Download count for paid plugins is not available

Wonderful introduction or tour guide for your page visitors. IntroJS adapted to TinyMCE for a seamless experience.

Auto and manual play along with its 5 themes.
Default,

Description

Add as many steps you need in a website for a magnificent introduction to your project.  

With the Power of IntroJS you can add a step by step guide or tour using your TinyMCE editor. the plugin adds a button to the bottom menu tool bar called "Intro"

You can highlight text and add a step to the selected text only. Or if you need to set a step on a whole paragraph, choowe the "html tag" option from the menu so it will target the entire paragraph. For a better experience, don't press enter when writing in your editor, otherwise you'll have multiple <p> tags and all will get assigned the same step and description if its within the current TinyMCE editor that you are on. 

IntroJs project can be found here 

Installation

  1. Once purchased, Activate the plugin.
  2. Choose whether your steps would be shown on page load (Auto)  or by adding a button ( click)
  3. Choose a theme, Default, Dark, Nassim, Nazanin, Royal.
  4. Go to back to edit your site, and add the Text widget. 
  5. a New button "Intro" is available.
  6. You can Highlight text and choose "selected text" that will wrap the text and insert the intro description and step.
  7. If you wish to select more than just a few words but an entire paragraph you can choose "HTML tag" and select paragraph, as well as numbered lists or bullet lists.
  8. Go to preview and enjoy.

Usage

  1. Add the Text widget to your site and click on the new button "Intro"
  2. The Button is a dropdown menu with 3 options, Selected text, html tag and button
  3. If you already have text and you highlight it, you can click on the Intro button and choose "selected tex" in order to add a step to this highlighted text only.
  4. If you prefer to add the step to the whole paragraph, you can click on "html tag" and on the popup window choose again from the dropdown menu "paragraph" 

Depending on your plugin settings, you would need to add a "button if you while installing it selected "Click" instead of " Auto".

The "html tag" option also allows to insert steps to numbered and bullet lists. Because bullet lists and numbered lists are not wrapped by any other parent element, you have to specify them separately. 

For your convenience, the Code editor is enabled in TinyCME along with IntroJS