Angular7开荒---整合quill富文本编译器--HTML配置参数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38712932/article/details/89291853

当我们使用Angular7整合quill时，要实现上传图片，有些不好弄，只能重写quill的配置参数，以下图是通过

[modules]="config"

配置quill编译器的工具

但是呢，我们要实现上传图片，这样做不好弄，所以需要重写HTML自定义工具栏：

这是官方的所有HTML工具栏：https://github.com/quilljs/quill/blob/f75ff2973f068c3db44f949915eb8a74faf162a8/docs/_includes/full-toolbar.html

我们会发现官方提供太少的工具了，所以我这里花费半个多小时写完所有的工具栏HTML并写好相应的注释，方便大家调用。

 <!--字体加粗，斜线，底线，删线-->
                <span class="ql-formats">
              <button class="ql-bold"></button>
              <button class="ql-italic"></button>
              <button class="ql-underline"></button>
              <button class="ql-strike"></button>
              </span>

              <!--引用，代码-->
              <span class="ql-formats">
              <button class="ql-blockquote"></button>
              <button class="ql-code-block"></button>
              </span>

              <!--标题1和标题2-->
              <span class="ql-formats">
              <button class="ql-header" value="1"></button>
              <button class="ql-header" value="2"></button>
              </span>

              <!--数字列表和符号列表-->
              <span class="ql-formats">
              <button class="ql-list" value="ordered"></button>
              <button class="ql-list" value="bullet"></button>
              </span>

              <!--文字脚本sub和super-->
              <span class="ql-formats">
              <button class="ql-script" value="sub"></button>
              <button class="ql-script" value="super"></button>
              </span>

              <!--文字缩进-->
              <span class="ql-formats">
              <button class="ql-indent" value="-1"></button>
              <button class="ql-indent" value="+1"></button>
              </span>

              <!--文字对齐方式-->
              <span class="ql-formats">
              <button class="ql-direction" value="rtl"></button>
              </span>



              <!--字体大小（设置前面输入的）和大小(设置后面输入的)-->
           <span class="ql-formats">
             <select class="ql-header">
                  <option value="false"></option>
               <option value="1"></option>
              <option value="2"></option>
              <option value="3"></option>
                 <option value="4"></option>
                 <option value="5"></option>
                 <option value="6"></option>
             </select>

            <select class="ql-size">
              <option value="small"></option>
              <option selected></option>
              <option value="large"></option>
              <option value="huge"></option>
            </select>
            </span>

              <!--字体前景色和背景色以及字体样式和字体对齐方式-->
              <span class="ql-formats">
                 <select class="ql-color"></select>
                 <select class="ql-background"></select>
                   <select class="ql-font"></select>
                 <select class="ql-align"></select>
              </span>
                 <!--链接、图片和视频-->
              <span class="ql-formats">
            <button type="button" class="ql-link"></button>
          <button type="button" class="ql-image"></button>
  <button type="button" class="ql-video"></button>
              </span>