VueJS Medium Editor

Vue 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

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

OR

npm install vuejs-medium-editor

Usage

add to global component

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

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

Don't forget to include css file in your project

require 'medium-editor/dist/css/medium-editor.css'
require 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
require '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>

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

1. 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

2. 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

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

About Me

Magak Emmanuel

Credits

The original repo vue2-medium-editor customised this to my preference

License

MIT

Happy coding, Star before Fork 😊💪💯