Medium-style Inline Text Editor Component For Vue

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.

// core component import MediumEditor from 'vuejs-medium-editor'

// stylesheet
@import "~medium-editor/dist/css/medium-editor.css";

// theme
@import "./themes/default.css";

// for syntax highlighting
@import '~highlight.js/styles/github.css';

2. Add the Medium Editor component to the template.

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

3. Register the component.

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

4. 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,
      }
    }
  }
}

Preview:

Medium-style Inline Text Editor Component For Vue

Download Details:

Author: manuelgeek

Live Demo: https://manuelgeek.github.io/vuejs-medium-editor/

Download Link: https://github.com/manuelgeek/vuejs-medium-editor/archive/master.zip

Official Website: https://github.com/manuelgeek/vuejs-medium-editor

Install & Download:

# Yarn
$ yarn add vuejs-medium-editor

# NPM
$ npm install vuejs-medium-editor --save

You Might Be Interested In:

Add Comment