富文本编辑器Quill

最新推荐文章于 2024-05-16 16:00:16 发布

weixin_43962846

最新推荐文章于 2024-05-16 16:00:16 发布

阅读量285

点赞数

分类专栏： template 项目

本文链接：https://blog.csdn.net/weixin_43962846/article/details/108057299

版权

template 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

项目

3 篇文章 0 订阅

订阅专栏

官方文档：https://www.kancloud.cn/liuwave/quill/1409423

网页版：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>quill-富文本编辑器网页版</title>
		<!-- 引入css文件 -->
		<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" rel="stylesheet">
		<!-- 采用snow主题 -->
		<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
	</head>
	<body>

		<!-- 创建编辑容器 -->
		<div id="editor">
			<p>Hello World!</p>
		</div>


		<!-- 引入高亮js文件 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
		<!-- quill的主要js文件 -->
		<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
		<script>
			// 自定义编辑器工具栏
			var toolbarOptions = [
				['bold', 'italic', 'underline', 'strike'], // 切换按钮
				['blockquote', 'code-block'],

				[{
					'header': 1
				}, {
					'header': 2
				}], // 用户自定义按钮值
				[{
					'list': 'ordered'
				}, {
					'list': 'bullet'
				}],
				[{
					'script': 'sub'
				}, {
					'script': 'super'
				}], // 上标/下标
				[{
					'indent': '-1'
				}, {
					'indent': '+1'
				}], // 减少缩进/缩进
				[{
					'direction': 'rtl'
				}], // 文本下划线

				[{
					'size': ['small', false, 'large', 'huge']
				}], // 用户自定义下拉
				[{
					'header': [1, 2, 3, 4, 5, 6, false]
				}],

				[{
					'color': []
				}, {
					'background': []
				}], // 主题默认下拉，使用主题提供的值
				[{
					'font': []
				}],
				[{
					'align': []
				}],

				['clean'] // 清除格式
			];
			
			// 初始化编辑器，snow主题 
			var quill = new Quill('#editor', {
				modules: {
					toolbar: toolbarOptions
				},
				theme: 'snow'
			});

			// 提交表单
			function sub_post() {
				var html = document.querySelector('#editor').children[0].innerHTML;
				console.log(html)

			}
		</script>
	</body>
</html>

Vue版：

npm install quill -D

新建一个组件QuillEditor.vue

<template>
    <div>
        <div class="editor"></div>
    </div>
</template>

<script>
    import Quill from 'quill'
    import 'quill/dist/quill.snow.css'
    export default {
        name: 'editor',
        data() {
            return {
                quill:null,
                options: {
                    theme: 'snow', //主题
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{ 'header': 1 }, { 'header': 2 }],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'script': 'sub' }, { 'script': 'super' }],
                            [{ 'indent': '-1' }, { 'indent': '+1' }],
                            [{ 'direction': 'rtl' }],
                            [{ 'size': ['small', false, 'large', 'huge'] }],
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'font': [] }],
                            [{ 'align': [] }],
                            ['clean'],
                            ['link', 'image', 'video']
                        ]
                    },
                    placeholder: 'Insert text here ...'
                }
            }
        },
        mounted() {
            let dom = this.$el.querySelector('.editor');
            this.quill = new Quill(dom, this.options);
            this.quill.on('text-change', () => {
                // this.$emit('input', this.quill.getContents());  //返回一个Delta对象
                this.$emit('input', this.quill.container.firstChild.innerHTML)
            });
        },
    }
</script>

在需要的组件中引用：

<template>
	<div class="edit">
		<editor v-model="container"></editor>
	</div>
</template>

<script>
	import editor from '@/components/QuillEditor.vue';
	export default {		
		components: {
			editor
		},
		data() {
			return {				
				container: '',
			}
		},
		watch: {			
			// container(val){
			// 	console.log(val)
			// }
		}		
	}
</script>

weixin_43962846

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器Quill

官方文档：https://www.kancloud.cn/liuwave/quill/1409423网页版：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>quill-富文本编辑器网
复制链接

扫一扫