Medium Style Floating Editor For Vue.js

Medium Style Floating Editor For Vue.js


A medium-editor component for Vue2. For Vue1 checkout branch 1.0.

Standard - JavaScript Style Guide


npm i --save vue2-medium-editor


import editor from 'vue2-medium-editor'
import Vue from 'vue'

new Vue {
  components: {
    'medium-editor': editor
<!-- index.html -->
<medium-editor :text='myText' :options='options' custom-tag='h2' v-on:edit='applyTextEdit'>

Full usage example at

A list of available options can be found in the documentation of MediumEditor. Optionally you may use the standalone builds from dist which have medium-editor.js included.

Make sure you include the required CSS.

Custom buttons and extensions

To create extensions for the MediumEditor you will need the original MediumEditor object, which you can get like this:

var HighlightButton = VueMediumEditor.MediumEditor.Extension.extend({
    // ...

See Extensions section of the MediumEditor's wiki for details.

Bundling & Minification

To generate the standalone bundle

npm i --save-dev
npm run prepublish

Known Issues

If you encounter issues with the link button and the events it emits, please refer to


Anyone else who opened an Issue or PR!

Thank you! :tada:

Github Repository

Tags: #VueJs