quilljs富文本编辑器使用方法和实时代码高亮方法

1583154893(1).jpg

quill.js_强大,丰富的文本编辑器,这篇文章主要讲最新版的quilljs怎么实时渲染代码。主要是找了百度很多文章都不对,最后发现其实很简单。
如下图所示,可以输入代码后实时渲染高亮

1583155127(1).jpg

下面开始在html插入quilljs富文本编辑器
引入quilljs的css、js和highlight的css、js

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.bubble.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.js"></script>
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.js"></script>

id为editor的div

<div id="editor"></div>

设置quilljs的图标和高度还有自动保存功能、代码高亮(已注释)

var toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'link', 'image', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'align': [] }],

        ['clean']                                         // remove formatting button
    ];

    var quill = new Quill('#editor', {
        bounds: '#editor',
        modules: {
            //自动保存
            history: {
                delay: 1000,
                maxStack: 100,
                userOnly: false
            },
            'syntax': true,//代码高亮
            toolbar: toolbarOptions
        },
        placeholder: '请输入内容',
        theme: 'snow'
    });
    quill.container.style.height = '500px';//高度
    this.quill.pasteHTML("插入html");//用于修改重新编辑内容

未经允许不得转载:我爱源代码 » quilljs富文本编辑器使用方法和实时代码高亮方法

热门文章

  • 相关推荐

    • 暂无文章

    评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活