vuerd-core plugin quill
$ yarn add vuerd-core
$ yarn add vuerd-plugin-quill
or
$ npm install vuerd-core
$ npm install vuerd-plugin-quill// main.js or main.ts
import Vue from 'vue';
import VuerdCore from 'vuerd-core';
import Quill from 'vuerd-plugin-quill';
import 'vuerd-core/dist/vuerd-core.css';
import 'vuerd-plugin-quill/dist/vuerd-plugin-quill.css';
VuerdCore.use(
Quill,
/*
{
imageUpload(files, 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-quill/dist/vuerd-plugin-quill.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-quill/dist/vuerd-plugin-quill.umd.min.js"></script>
<script>
const VuerdCore = window['vuerd-core'].default
const Quill = window['vuerd-plugin-quill'].default
VuerdCore.use(Quill)
Vue.use(VuerdCore)
new Vue({
el: '#app'
})
</script>
</body>
</html>export interface Option {
imageUpload?: (
files: File[] | Blob[],
callback: (url: string) => void
) => void;
scope?: string[] | RegExp[];
exclude?: string[] | RegExp[];
editorOption?: EditorOption;
}
export interface EditorOption {
theme?: Theme;
toolbar?: any[] | boolean;
}
export type Theme = "snow" | "bubble";| 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 | quill option |
editorOption = {
theme: "snow",
toolbar: [
[{ font: [] }, { header: [1, 2, 3, 4, 5, 6, false] }],
[
{ color: [] },
{ background: [] },
"bold",
"italic",
"underline",
"strike"
],
["blockquote", "code-block"],
["link", "image", "video"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
{ align: [] },
{ script: "sub" },
{ script: "super" }
],
["clean"]
]
};