Vue-Quill-Editor

最新推荐文章于 2024-06-23 09:46:39 发布

当铺鬼

最新推荐文章于 2024-06-23 09:46:39 发布

阅读量212

点赞数

分类专栏：项目文章标签： vue

本文链接：https://blog.csdn.net/dangpugui/article/details/114494476

版权

项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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/vue-quill-editor@3.0.6/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>

当铺鬼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-Quill-Editor

Vue-Quill-EditorCDNstaticfile、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="widt
复制链接

扫一扫