vuerd-core plugin medium-editor
$ yarn add vuerd-core
$ yarn add vuerd-plugin-medium-editor
or
$ npm install vuerd-core
$ npm install vuerd-plugin-medium-editor// 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 /><!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>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";| 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 |
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
}