VUE 富文本编辑器 Vue-Quill-Editor CDN 方式引入与使用

最新推荐文章于 2024-07-09 21:18:14 发布

Don-

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量1.5k

点赞数

分类专栏：记录一下文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46812727/article/details/125558562

版权

记录一下专栏收录该内容

4 篇文章 2 订阅

订阅专栏

VUE 富文本编辑器 Vue-Quill-Editor CDN 方式引入与使用

下面通过 CDN 引入 Vue-Quill-Editor 的方式来使用！！！

引入

Quill Editor v1.3.7

<script th:src="@{/static/js/vue/vue.js}"></script>
<script th:src="@{/static/js/element-ui/element-ui.js}"></script>
<!-- quill -->
<script th:src="@{/static/js/quill/quill.js}"></script>
<script th:src="@{/static/js/quill/vue-quill-editor.js}"></script>
<link rel="stylesheet" th:href="@{/static/js/quill/quill.core.css}">
<link rel="stylesheet" th:href="@{/static/js/quill/quill.snow.css}">
<link rel="stylesheet" th:href="@{/static/js/quill/quill.bubble.css}">

使用

组件：

<quill-editor v-model="editForm.commodityDescribe" ref="quillEditor" :options="editorOption"></quill-editor>

初始化：

Vue.use(VueQuillEditor);
var vm = new Vue({
	 el: '#app',
	 data: {
     	editForm: {commodityDescribe: ''},
        editorOption: {
            placeholder: '描述...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                    [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
                    [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
                    [{'indent': '-1'}, {'indent': '+1'}], // 缩进
                    [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                    [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
                    [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
                    [{'align': []}], // 对齐方式
                    ['clean'], // 清除字体样式
                    // ['image'] // 上传图片、上传视频
                ]
            }
        },
     }
})

结果：

在这里插入图片描述