A6Brgeuka / medium-editor-multi-placeholders-plugin

πŸ“Œ A plugin for adding multiple placeholders in MediumEditor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MediumEditorMultiPlaceholders Plugin

A plugin that allows you to setup multiple placeholders with MediumEditor

NPM

Travis Build Status Dependency Status devDependency Status

Demo

Demo

Try at Demo page

Basic usage

Installation

Via npm:

Run in your console:

npm install medium-editor-multi-placeholders-plugin

Then build the project by running

grunt

Via bower:

bower install medium-editor-multi-placeholders-plugin

Usage

First thing: don't forget to load the plugin after MediumEditor

<script src="dist/medium-editor-multi-placeholders-plugin.min.js"></script>

Now when you create MediumEditor instance, just disable normal placeholder and specify the extension and placeholder options:

var editor = new MediumEditor('#editor', {
      placeholder: false,
      extensions: {
        'multi_placeholder': new MediumEditorMultiPlaceholders({
          placeholders: [
              {
                tag: 'h1',
                text: 'Title'
              },
              {
                tag: 'p',
                text: 'Tell your story...'
              }
          ]
        })
      }
    });

Plugin Options

The plugin itself only takes one option: placeholders which is an array of placeholder objects. Each placeholder object is in the format { tag: 'HTMLTag', text: 'Placeholder Text' }.

var multiPlaceholders = new MediumEditorMultiPlaceholders({
    placeholders: [
	    /* Your place holders goes here
	       You can have as many placeholders as you want!
	       Example: { tag: 'h1', text: 'Title' } */
    ]
});

Known Issues

Conflicts with MediumEditor Insert Plugin, because placeholder: false doesn't work with the some version of the it.

License

MIT: https://github.com/smiled0g/medium-editor-multi-placeholders-plugin/blob/master/LICENSE

About

πŸ“Œ A plugin for adding multiple placeholders in MediumEditor

License:MIT License


Languages

Language:JavaScript 100.0%