Quill.js使用示例

<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>
如图：

在这里插入图片描述
如图：

猜你喜欢
