Medium-style Inline Text Editor Component For Vue 3 & 2

Install & Download:

# Yarn (Vue 2)
$ yarn add vuejs-medium-editor
# NPM (Vue 2)
$ npm install vuejs-medium-editor --save
# Yarn (Vue 3)
$ yarn add vuejs-medium-editor@next
# NPM (Vue 3)
$ npm install vuejs-medium-editor@next --save

Description:

A Vue.js component that enables Medium.com-like inline editor on your web app.

The component displays the editor as a tooltip when part of the text is selected.

Also comes with a Code Editor mode with syntax highlighting (Requires highlight.js).

How to use it:

1. Import the component and necessary stylesheets into your app.

// Vue 2
import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'
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'
Vue.component('medium-editor', MediumEditor)

// Vue 3
import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'
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'
const app = createApp(App)
app.component('medium-editor', MediumEditor)
app.mount('#app')

2. Add the Medium Editor component to the template.

<medium-editor 
  :content='content' 
  :options='options' 
  />

3.. Define the content to be editable.

export default {
  data() {
    return {
      content: "Any Content Here",
    }
  }
}

5. Customize the editor buttons in the toolbar.

export default {
  data() {
    return {
      content: "",
      options: {
        toolbar: {
          buttons: ["bold", "italic",
          {
              name: 'anchor',
              action: 'createLink',
              aria: 'link',
              tagNames: ['a'],
              contentDefault: '<b>🔗</b>',
              contentFA: '<i class="fa fa-link"></i>',
          },
          "underline", "quote", "h1", "h2", "h3", "h4",
          {
              name: 'pre',
              action: 'append-pre',
              aria: 'code highlight',
              tagNames: ['pre'],
              contentDefault: '<b><\\></b>',
              contentFA: '<i class="fa fa-code fa-lg"></i>'
          },
          'unorderedlist', 'orderedlist',
          {
              name: 'image',
              action: 'image',
              aria: 'insert image from url',
              tagNames: ['img'],
              contentDefault: '<b>image</b>',
              contentFA: '<i class="fa fa-picture-o"></i>'
          }]
        }
      }
    }
  }
}

6. Customize the image upload.

export default {
  data() {
    return {
      content: "",
      options: {
        uploadUrl: "https://api.imgur.com/3/image",
        uploadUrlHeader: {'Authorization': 'Client-ID db856b43cc7f441'},
        file_input_name: "image",
        imgur: true,
      }
    }
  }
}