Vuerd-plugin-medium-editor NPM

vuerd-plugin-medium-editor

vuerd-core plugin medium-editor

Document

Install

$ yarn add vuerd-core
$ yarn add vuerd-plugin-medium-editor
or
$ npm install vuerd-core
$ npm install vuerd-plugin-medium-editor

Usage

// main.js or main.ts
import Vue from 'vue';
import VuerdCore from 'vuerd-core';
import MediumEditor from 'vuerd-plugin-medium-editor';
import 'vuerd-core/dist/vuerd-core.css';
import 'vuerd-plugin-medium-editor/dist/vuerd-plugin-medium-editor.css';

VuerdCore.use(
  MediumEditor,
/*
  {
    imageUpload(file, callback) {
      // upload
      callback("URL");
    }
  }
*/
);

Vue.use(VuerdCore);

<vuerd-core />

CDN Quick Start

<!DOCTYPE html>
<html>
<head>
  <title>vuerd-core demo</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuerd-core/dist/vuerd-core.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuerd-plugin-medium-editor/dist/vuerd-plugin-medium-editor.css">
</head>
<body>
  <div id="app">
    <vuerd-core />
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuerd-core/dist/vuerd-core.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuerd-plugin-medium-editor/dist/vuerd-plugin-medium-editor.umd.min.js"></script>
  <script>
    const VuerdCore = window['vuerd-core'].default
    const MediumEditor = window['vuerd-plugin-medium-editor'].default
    VuerdCore.use(MediumEditor)
    Vue.use(VuerdCore)
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Option interface

export interface Option {
  imageUpload?: (file: File, callback: (url: string) => void) => void;
  scope?: string[] | RegExp[];
  exclude?: string[] | RegExp[];
  editorOption?: EditorOption;
}

export interface EditorOption {
  delay?: number; // 0
  disableReturn?: boolean; // false
  disableDoubleReturn?: boolean; // false
  disableExtraSpaces?: boolean; // false
  disableEditing?: boolean; // false
  spellcheck?: boolean; // true
  targetBlank?: boolean; // false
  toolbar?: Toolbar | boolean;
  anchorPreview?: AnchorPreview | boolean;
  placeholder?: Placeholder | boolean;
  anchor?: Anchor;
  paste?: Paste;
  keyboardCommands?: { commands: Command[] } | boolean;
  autoLink?: boolean; // true
}

export interface Toolbar {
  allowMultiParagraphSelection?: boolean; // true
  buttons?: Buttons[] | any;
  diffLeft?: number; // 0
  diffTop?: number; // -10
  firstButtonClass?: string; // 'medium-editor-button-first'
  lastButtonClass?: string; // 'medium-editor-button-last'
  relativeContainer?: HTMLElement | null; // null
  standardizeSelectionStart?: boolean; // false
  static?: boolean; // false
  align?: Align; // 'center'
  sticky?: boolean; // false
  updateOnEmptySelection?: boolean; // false
}

export interface AnchorPreview {
  hideDelay?: number; // 500
  previewValueSelector?: string; // 'a'
  showWhenToolbarIsVisible?: boolean; // false
  showOnEmptyLinks?: boolean; // true
}

export interface Placeholder {
  text?: string; // 'Type your text'
  hideOnClick: boolean; // true
}

export interface Anchor {
  customClassOption?: string | null; // null
  customClassOptionText?: string; // 'Button'
  linkValidation?: boolean; // false
  placeholderText?: string; // 'Paste or type a link'
  targetCheckbox?: boolean; // false
  targetCheckboxText?: string; // 'Open in new window'
}

export interface Paste {
  forcePlainText?: boolean; // true
  cleanPastedHTML?: boolean; // false
  preCleanReplacements?: any;
  cleanReplacements?: any;
  cleanAttrs?: string[]; // ['class', 'style', 'dir']
  cleanTags?: string[]; // ['meta']
  unwrapTags?: string[]; // []
}

export interface Command {
  command: string;
  key: string;
  meta: boolean;
  shift: boolean;
  alt: boolean;
}

export type Buttons =
  | "bold"
  | "italic"
  | "underline"
  | "strikethrough"
  | "subscript"
  | "superscript"
  | "anchor"
  | "image"
  | "quote"
  | "pre"
  | "orderedlist"
  | "unorderedlist"
  | "indent"
  | "outdent"
  | "justifyLeft"
  | "justifyCenter"
  | "justifyRight"
  | "justifyFull"
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "h6"
  | "removeFormat"
  | "html"
  | "table";

export type Align = "left" | "center" | "right";

Option

Name	Type	Default	Describe
imageUpload	function	base64	image upload
scope	String \| RegExp	"rich"	file designation(string extension)
exclude	String \| RegExp		exception file designation(string extension)
editorOption	EditorOption	default option	medium-editor option

default EditorOption

editorOption = {
    toolbar: {
      allowMultiParagraphSelection: true,
      buttons: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "subscript",
        "superscript",
        "anchor",
        "h2",
        "h3",
        "orderedlist",
        "unorderedlist",
        "quote",
        "table",
        "justifyLeft",
        "justifyCenter",
        "justifyRight"
      ],
      diffLeft: 0,
      diffTop: -10,
      firstButtonClass: "medium-editor-button-first",
      lastButtonClass: "medium-editor-button-last",
      align: "center"
    },
    autoLink: true,
    placeholder: false
}

License

MIT

vue vuejs vuerd editor vuerd plugin

core-js jquery medium-editor medium-editor-tables vue vue-class-component vue-property-decorator vuerd-core

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago