Angular7开荒---整合quill富文本编译器--HTML配置参数
当我们使用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>