medium-like-editor-vue-js

[WYSIWYG] A Medium-style Inline Text Editor Component for Vue.js

by

VueJS Medium Editor is a Vue.js component that enables Medium.com to like an editor embedded in your web application.

Displays the edited component as a tooltip when a piece of text is selected. It also comes with code editor mode with syntax highlighting (requires highlighting. js).

medium editor, medium editor image upload, vuejs block editor, medium like editor react, vue js editor, vuejs online editor, vuetify editor

Features

  • Medium like editor
  • Uploader pictures and description
    • Configurable display to display the image to normal size / expand / fullscreen
    • Imgur Download
  • Include essence
  • Syntax highlighting for inline code

How to make use of it:

Install and download:

# Yarn
$ yarn add vuejs-medium-editor

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

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

// 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 Media Editor component to the template.

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

3. Register the component.

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

4. Select the content to be edited.

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

Medium-style Inline Text Editor Component For Vue, VueJS Medium Editor Plugin/Github

See Demo And Download

Demo
Download

Official Website(manuelgeek): Click Here

This superior jQuery/javascript plugin is developed by manuelgeek. For extra Advanced Usages, please go to the official website.

Leave a Comment