Vuejs-medium-editor NPM

Vue3 Medium Editor

Vue 3 Js component for Medium Editor wrapper with https://github.com/yabwe/medium-editor But all plugins are re-writing in Vue.js All Medium Editor configs are supported

Demo

Features

Medium like editor
Image uploader and description
- Image width configable width for normal / expand / full screen sizing
- Imgur uploading
Embed Gist
Inline code syntax highlighting

Usage

Installation

yarn add vuejs-medium-editor

# Vue 3
yarn add vuejs-medium-editor@next

npm install vuejs-medium-editor

#Vue 3
npm install vuejs-medium-editor@next

Usage

add to global component in Vue 2

import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue.component('medium-editor', MediumEditor)

OR Vue 3

import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'

const app = createApp(App)

app.component('medium-editor', MediumEditor)
app.mount('#app')

Don't forget to include css file in your project For Vue 2

import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/ocean.css'

OR in styles like below

<style lang="css">
@import "~medium-editor/dist/css/medium-editor.css";
@import "~vuejs-medium-editor/src/themes/default.css";
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/ocean.css';
</style>

For for Vue 3

import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/dist/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/ocean.css'

OR in styles like below

<style lang="css">
@import "medium-editor/dist/css/medium-editor.css";
@import "vuejs-medium-editor/dist/themes/default.css";
/*@import '~highlight.js/styles/github.css';*/
@import 'highlight.js/styles/ocean.css';
</style>

Example

<medium-editor
  v-model="content"
  :options="options"
  :onChange="onChange"
  v-on:uploaded="uploadCallback"
/>

<script>
import Editor from './Editor.vue'

export default {
  data() {
    return {
      content: '',
      options: {},
    }
  },
  components: {
    'medium-editor': Editor,
  },
  methods: {
    onChange() {
      console.log(this.content)
    },
    uploadCallback(url) {
      console.log('uploaded url', url)
    },
  },
}
</script>

Available Props

prefill(string) - Pre filled editor value - default value,
readOnly(boolean) - make the editor read only. Default - false
options - used to pass editor options, see below
onChange - pass onchange event
hideImage - Hides image upload option (default -false)
hideGist - Hides gist code embed - default(false)

Events

uploaded - imgur image upload callback

Options

toolbar

you can customize the toolbar buttons too

options: {
  toolbar: {
    buttons: [
      'bold',
      'italic',
      'underline',
      'quote',
      'h1',
      'h2',
      'h3',
      'pre',
      'unorderedlist',
    ]
  }
}

available options: All options are available here You can also override options like in Medium Editor ;

options: {
  buttons: [
    'anchor',
    {
      name: 'pre',
      action: 'append-pre',
      aria: 'code highlight',
      tagNames: ['pre'],
      contentDefault: '<b><\\></b>',
      contentFA: '<i class="fa fa-code fa-lg"></i>',
    },
  ]
}

images

Using the image option in toolbar, Add image link, highlight to edit, then select image icon

buttons: [
  {
    name: 'image',
    action: 'image',
    aria: 'insert image from url',
    tagNames: ['img'],
    contentDefault: '<b>image</b>',
    contentFA: '<i class="fa fa-picture-o"></i>',
  },
]

Also, available option: thanks to ErgoFriend pull request on the original repo

 options: {
    uploadUrl: "https://api.imgur.com/3/image",
    uploadUrlHeader: {'Authorization': 'Client-ID a3tw6ve4wss3c'},
    file_input_name: "image",
    file_size: 1024 * 1024 * 10,
    imgur: true,
 }

code highlighting

Code highlighting is inbuilt using highlight.js Add code snippet, highlight, then select code in toolbar(you need to add pre in toolbar, see options above)

You should include the highligh.js css file within the styles

<style>
    /*default css  */
    @import '~highlight.js/styles/default.css';
    /* github style */
    @import '~highlight.js/styles/github.css';
</style>

You can get more theme styles here

Code highliting using gist, also inbuilt. Click + button, then click code(Add gist), then add gist URL, click Enter to finish

Read only example

<medium-editor :prefill="defaultValue" :read-only="true" />

Nuxt.js Usage

create a plugin file vuejs-medium-editor.js inside /plugins dir

import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue.component('medium-editor', MediumEditor)

import a plugin in nuxt.config.js with disable ssr mode

plugins: [{ src: '~/plugins/vuejs-medium-editor', ssr: false }]

include a css file For Vue 2

css: [
  'medium-editor/dist/css/medium-editor.css',
  'vuejs-medium-editor/src/themes/default.css',
  'highlight.js/styles/ocean.css', //if using code highlight
]

For Vue 3

css: [
  'medium-editor/dist/css/medium-editor.css',
  'vuejs-medium-editor/dist/themes/default.css',
  'highlight.js/styles/ocean.css', //if using code highlight
]