一个Vue.js组件，可在您的Web应用程序上启用Medium.com（如内联编辑器）。

选择部分文本后，组件会将编辑器显示为工具提示。

还带有带有语法高亮显示的Code Editor模式（需要highlight.js）。

安装和下载：

# Yarn
$ yarn add vuejs-medium-editor

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

如何使用它：

1.将组件和必要的样式表导入您的应用程序。

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

// 样式表
@import "~medium-editor/dist/css/medium-editor.css";

// 主题
@import "./themes/default.css";

// 对于语法高亮显示
@import '~highlight.js/styles/github.css';

2.将中型编辑器组件添加到模板。

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

3.注册组件。

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

4.定义要编辑的内容。

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

5.自定义工具栏中的编辑器按钮。

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.自定义图像上传。

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