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="//cdn.quilljs.com/1.0.0/quill.js"></script>
    <script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>
    <link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <div id="editor" style="background: #fff">
        <p>Hello World</p>
    </div>
    <script>
        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' ] // 清除文字格是
                ]
            }
        });
    </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers