v0.3 Getting Started

Download

• Bower: bower install medium-editor-insert-plugin#^0.3 --save
• Manual: Download as ZIP

Usage

The first step is to add all prerequisites (MediumEditor and jQuery):

<link rel="stylesheet" href="bower_components/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/themes/default.css">
<script src="bower_components/medium-editor/dist/js/medium-editor.min.js"></script>
<script src="bower_components/jquery/jquery.min.js"></script>

Now you have two possibilites. You can load all addons at once:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.all.min.js"></script>

Or if you for some reason want, you can load only addons that you want separately. In this case, don't forget to load medium-editor-insert-plugin.min.js, which is the main plugin file, that initializes addons:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-plugin.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-images.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-embeds.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-tables.min.js"></script>

Initialize MediumEditor as you normally would:

<script>var editor = new MediumEditor('.editable');</script>

Finally, you can initialize the insert plugin with images and embed addon:

$(function () {
  $('.editable').mediumInsert({
    editor: editor,
    addons: {
      images: {},
      embeds: {
        oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1'
      },
      tables: {}
    }
  });
});

Getting clean content

After you have a working editor with the plugin, you will want to get a clean content of the editor without any additional unnecessary placeholders. This could be done by using the editor's serialize() function, which returns JSON object with elements contents.

var allContents = editor.serialize();
var elContent = allContents["element-0"].value;

For styling the content in frontend (where it will be read only without editing posibilities) use this CSS:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin-frontend.min.css">