Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



47 Commits

Repository files navigation

Awesome Medium Editor

Version License Dependencies Demo Gitter

This plugin expands capabilities of MediumEditor (a clone of WYSIWYG editor) and it enables users to insert into the editor various types of content (depending on available addons).

Currently available features:

  • Support RTL Language (Farsi, Hebrew, Arabic & ...)
  • Insert Image (from url)
  • Extract content as html or markdown

Browser Support

Smiley face

Smiley face

Quick Start

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

<!-- CSS -->
<link rel="stylesheet" href="dist/css/demo.css">
<link rel="stylesheet" href="dist/css/font-awesome.css">
<link rel="stylesheet" href="dist/css/medium-editor.min.css">
<link rel="stylesheet" href="dist/css/themes/default.css" id="medium-editor-theme">
<link rel="stylesheet" href="dist/css/medium-editor-insert-plugin.min.css">
<link rel="stylesheet" href="dist/css/toastr.min.css">
<link rel="stylesheet" href="src/css/style.css">

<!-- JS -->
<script src="dist/js/jquery.min.js"></script>
<script src="dist/js/medium-editor.js"></script>
<script src="dist/js/handlebars.runtime.min.js"></script>
<script src="dist/js/medium-editor-insert-plugin.js"></script>
<script src="dist/js/to-markdown.js"></script>
<script src="dist/js/toastr.min.js"></script>
<script src="src/js/main.js"></script>

<!-- BootStrap CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

If you want use RTL support, put both button in your code:

<button type="button" class="btn btn-warning" id="dir-ltr">LTR</button>

<button type="button" class="btn btn-default" id="dir-rtl">RTL</button>

If you want to extract and copy your code as html or markdown just put these buttons:

<button type="button" class="btn btn-success" id="extract-to-html">HTML</button>

<button type="button" class="btn btn-success" id="extract-to-markdown">Markdown</button>

Initialize MediumEditor as you normally would:

<div class="editable" id="editable-container">   

For final step, put the following javascript source for the Medium-Editor:

<div class="editable" id="editable-container">   

now, everything is ready! 😉👌

Demo Link

Demo Pictures


Kill some bugs 😈

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Test your changes to the best of your ability.
  4. Update the documentation to reflect your changes if they add or changes current functionality.
  5. Commit your changes (git commit -am 'Added some feature') without files from the dist directory.
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request