Skip to content
This repository has been archived by the owner on Sep 11, 2020. It is now read-only.

v2.x Getting Started

Jump to bottom
Krisan Alfa Timur edited this page Jan 20, 2016 · 3 revisions

Download

Usage

Version 2.x has a little more dependencies than the previous one. If you downloaded the plugin via Bower, all dependencies were downloaded automatically for you. If you prefer manual download, please, remember to download the dependencies, too.

List of dependencies:

The first step is to include all the dependencies to your code:

<!-- CSS -->
<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" id="medium-editor-theme">
<!-- Font Awesome for awesome icons. You can redefine icons used in a plugin configuration -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!-- JS -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.min.js"></script>
<script src="bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<!-- Unfortunately, jQuery File Upload Plugin has a few more dependencies itself -->
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>

Now, when the dependencies are set we can include the plugin:

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

<!-- JS -->
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>

Initialize MediumEditor as you normally would:

var editor = new MediumEditor('.editable');

Finally, you can initialize the insert plugin:

$(function () {
    $('.editable').mediumInsert({
        editor: editor
    });
});

Getting clean content

After you have a working editor with the plugin, you will want to get a clean content from the editor without any additional plugin related stuff. 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">
Clone this wiki locally