🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Vue 2 component for the the dead simple inline editor toolbar just you seen on Medium.com.

Text

Documentation

vue2-medium-editor

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

Standard - JavaScript Style Guide

Installation

#bash npm i --save vue2-medium-editor

Usage

//app.js 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 github.com/FranzSkuffka/vue-medium-editor/tree/gh-pages

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 https://github.com/yabwe/medium-editor/issues/1153.

Contributors

Anyone else who opened an Issue or PR!

Thank you! 🎉


You May Also Like