Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- Quill v1.0.0 -->
    <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
    <script src="https://cdn.quilljs.com/1.0.0/quill.min.js"></script>
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <h3>Edit</h3>
        <form id="form">
        <div id="editor" style="background: #fff">
            <p>Hello World</p>
        </div>
        <input type="submit" value="Save" />
    </form>
    <hr />
    <h3>Result</h3>
    <div id="result"></div>
    <script>
​
        function load()
        {
            quill.setContents([
                { insert: 'ABC', attributes: { bold: true } }
            ]);
        }
​
        function result()
        {
            // 將Delta格式轉成HTML，並輸出到前端
            var el = document.createElement( "div" ),
                ql = new Quill( el, {} );
                ql.setContents( JSON.parse( DATA ).ops );
            document.getElementById( "result" ).innerHTML = ql.root.innerHTML;
            el = null;
        }
​
        document.getElementById( "form" ).onsubmit = function() {
            DATA = JSON.stringify( quill.getContents() );
            console.log( "Delta: " + JSON.stringify( quill.getContents() ) ); // Delta格式
            console.log( "HTML: " + quill.root.innerHTML ); // HTML格式
            console.log( "Text: " + quill.getText() ); //文字格式
            result(); // 輸出到前端
            return false;
        };
​
​
        var quill = new Quill( "#editor", {
            theme: "snow", // 模板
            modules: {
                toolbar: [
                    // 工具列列表[註1]
                    ['bold', 'italic', 'underline', 'strike'], // 粗體、斜體、底線和刪節線
                    ['blockquote', 'code-block'], // 區塊、程式區塊
                    [{ 'header': 1 }, { 'header': 2 }], // 標題1、標題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' ] // 清除文字格是
                ]
            }
        }),
            DATA = null;
​
        load(); // 模擬從Database載入資料
​
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers