WEB 编程：使用富文本编辑器 Quill 配合 WebBroker 后端

使用 Delphi 的 WebBroker 框架写 Web Server，需要一个前端的富文本编辑器。

评估了好几个，最后选择 Quill 这个开源的。

官方地址：Quill - Your powerful rich text editor

把前端代码，存储为一个单独的文本文件，方便随便哪个页面需要的时候可以使用。相当于封装为一个独立的对象，方便代码重用。

Quill 编辑器的代码如下：

<!-- quill 编辑器的封装 -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">

  <style>
    .edit_container {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    .ql-editor{
         height:400px;
     }
  </style>
  <form id="myForm" action="ContentUpdate" method="post">
        <div id="editor"></div>
        <input type="hidden" name="delta" id="deltaInput">
        <input type="hidden" name="html" id="htmlInput">
        <input type="submit" value="Submit">
  </form>

  <script>
        const quill = new Quill('#editor', {
            modules: {
            toolbar: [
              [{ header: [1, 2, false] }],
              ['bold', 'italic', 'underline'],
              ['image', 'code-block'],
            ],
            },
            theme: 'snow'
        });

        document.getElementById('myForm').addEventListener('submit', function() {
            // 获取 Quill 编辑器的内容
            const delta = JSON.stringify(quill.getContents());
            const html = quill.root.innerHTML;

            // 将内容放入隐藏输入框