一款轻便的富文本编辑器---Quill

最新推荐文章于 2024-06-18 09:39:38 发布

St_Sp_En

最新推荐文章于 2024-06-18 09:39:38 发布

阅读量4.7k

点赞数 1

分类专栏：富文本编辑器文章标签： quill 富文本编辑器

本文链接：https://blog.csdn.net/St_Sp_En/article/details/79103754

版权

富文本编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、官网地址：https://quilljs.com

2、直接上代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>QuillDemo</title>
        <link rel="stylesheet" href="quill.snow.css">
        <link rel="stylesheet" href="quill.bubble.css">
        <style>
            body {
                padding: 10px 30px;
            }
            #editor {
                min-height: 180px;
            }
        </style>
    </head>

    <body>
        <!--当toolbar以container的形式注册时需要显式地写出这些标签-->
        <div id="editor_header" style="display: none;">
            <!--字体大小-->
            <select class="ql-size">
                <option value="small"></option>
                <!-- 默认按钮 -->
                <option selected></option>
                <option value="large"></option>
                <option value="huge"></option>
            </select>
            <!--加粗按钮-->
            <button class="ql-bold"></button>
            <!--上标、下标按钮-->
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
            <!--自定义按钮-->
            <button id="my_button"></button>
        </div>
        <div id="editor">
             <!--可以直接在指定元素内加入文本或者html标签-->
             <!--<p>Hello Quill!</p>
             <p>Some initial <strong>bold</strong> text</p>
             <p><br></p>-->
        </div>


        <script src="quill.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'], //移除格式化
                ['image'],
                ['video'],
                ['formula'] //需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
            ];

            /* 实例化编辑器 */
            var quill = new Quill('#editor', {
                /*debug: 'info',*/

                modules: {
                    //formula: true, //公式；需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
                    //syntax: true,  //高亮；需要加载cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
                    /*toolbar: {
                        container:"#editor_header"
                    }*/ // 或者 toolbar :'#editor_header'
                    toolbar:toolbarOptions  //指定编辑器操作条
                },
                theme: 'snow', //主题，有两种，snow和bubble
                placeholder:'请输入',
                readOnly: false
            });

            /* 传入布尔值，控制编辑器是否可用 */
            quill.enable(); 
            //quill.blur(); //失去焦点
            //quill.focus(); //获得焦点

            /* 事件的绑定 */
            quill.on('text-change', function(delta, oldDelta, source) { 
                console.log(delta);
                console.log(oldDelta);
                console.log(source);
                console.log(quill.container.firstChild.innerHTML); //获取当前富文本编辑器实例的内容（带html标签）
            });
            //quill.off('text-change', handler); //事件的解绑

            /* 向编辑器中插值 */
            quill.clipboard.dangerouslyPasteHTML('&nbsp;<b>Hello World</b><p>new line</p>'); //向编辑器中插入html片段
            quill.setText('Hello!'); //向编辑器中插入文本

            /* 获取编辑器中的值 */
            console.log(quill.getContents());

            /* 自定义按钮 */
            var myBtn = document.querySelector("#my_button");
            myBtn.addEventListener("click",function(){
                console.log('my-btn')
            })
        </script>
    </body>

</html>

这里写图片描述
getContents()获取的值是以delta来展现的：

3、基于vue的quill-editor

地址：https://github.com/surmon-china/vue-quill-editor

St_Sp_En

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
一款轻便的富文本编辑器---Quill

1、官网地址：https://quilljs.com2、直接上代码：html> head> meta charset="utf-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1
复制链接

扫一扫