Vue-Quill-Editor
CDN
staticfile、jsdelivr、vue-quill-editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.min.js"></script>
</head>
<body>
<div id="app">
<quill-editor v-model="msg"></quill-editor>
</div>
<script>
Vue.use(window.VueQuillEditor);
new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
});
</script>
</body>
</html>
Mount with global
main.js
import Vue from 'vue'
import App from './App.vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor /* { default global options } */)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<quill-editor v-model="msg"></quill-editor>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
msg: 'Hello World'
}
}
}
</script>
Mount with local component
<template>
<div id="app">
<quill-editor v-model="msg" :options="editorOption"></quill-editor>
</div>
</template>
<script>
// quillEditor
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
import {
quillEditor } from "vue-quill-editor"
// highlight
import hljs from "highlight.js"
import "highlight.js/styles/vs2015.css"
export default {
name: "App",
components: {
quillEditor
},
data() {
return {
msg: "",
editorOption: {
placeholder: "Hello World",
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
[{
list: "ordered" }, {
list: "bullet" }],
["blockquote"],
["code-block", "image", "link"]
],
// 语法高亮
syntax: {
highlight: text => hljs.highlightAuto(text).value
}
}
}
}
}
}
</script>