Quill.js使用示例

最新推荐文章于 2025-02-21 14:04:53 发布

.NET跨平台

最新推荐文章于 2025-02-21 14:04:53 发布

阅读量1.7k

点赞数

分类专栏： UEditor.js|Quill.js|Summernote

原文链接：https://blog.csdn.net/WuLex

版权

UEditor.js|Quill.js|Summernote 专栏收录该内容

18 篇文章

订阅专栏

<html>
<head>
    <!-- Theme included stylesheets -->
    <link href="http://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
    <link href="http://cdn.quilljs.com/1.3.7/quill.bubble.css" rel="stylesheet">
    <!-- Core build with no theme, formatting, non-essential modules -->
    <link href="http://cdn.quilljs.com/1.3.7/quill.core.css" rel="stylesheet">
    <script src="http://cdn.quilljs.com/1.3.7/quill.core.js"></script>
    <script src="http://cdn.quilljs.com/1.3.7/quill.js"></script>
    <script src="http://cdn.quilljs.com/1.3.7/quill.min.js"></script>
    <style type="text/css">
        .ql-container {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            height: 50%;
        }
        .ql-editor { height: 100%; }
    </style>
</head>

<body>
<h1>Quill Editor</h1>

<!-- 创建工具栏组件 -->
<!--<div id="toolbar">
    <button class="ql-bold">Bold</button>
    <button class="ql-italic">Italic</button>
</div>-->

<!-- 创建文本编辑器 -->
<div id="editor">
    <!--<div id="#toolbar"></div>-->
</div>
<script>
    var options = {
        debug: 'info',
        modules: {
            //toolbar: [
            //    [{ header: [1, 2, false] }],
            //    ['bold', 'italic', 'underline'],
            //    ['image', 'code-block']
            //]
            //toolbar: '#toolbar'
        
        },
        placeholder: '撰写史诗...',
        readOnly: false,
        theme: 'snow'
    };
    var container = document.getElementById("editor");
    var editor = new Quill(container, options);


    function handleSubmit() {
        console.info('handleSubmit called');
        console.info('quill contents: ' + JSON.stringify(editor.getContents()));
        document.getElementById('jdr').value = JSON.stringify(editor.getContents());
    }
</script>
</body>

</html>

如图：

在这里插入图片描述