QuillJS 颜色选择器将内联样式更改为 类

Question

我正在为 Angular ngx-quill 使用 QuillJS 和库。 我想创建只有四种颜色的自定义颜色选择器，并在输出中得到以下内容

<span class="midnight-blue">Some text<span>

但是标准颜色选择器会向标签添加内联样式，这不适合我，因为 Angular sanitizer 删除了这些样式。这就是我现在拥有的：

<quill-editor
id="quill"
theme="snow"
placeholder="Your text here"
format="json"
[modules]="editorConfig"
[(ngModel)]="content"
(ngModelChange)="onModelChange()">
<div quill-editor-toolbar>
   <div class="ql-formats">
      <select class="ql-color">
         <option value="rgb(0, 0, 0)"></option>
         <option value="rgb(230, 0, 0)"></option>
         <option value="rgb(255, 153, 0)"></option>
         <option value="rgb(255, 255, 0)"></option>
      </select>
   </div>
</div>

是否可以通过 类 添加样式来创建我自己的颜色选择器？

Answer 1

我通过以下方式解决了这个问题

<div quill-editor-toolbar>
      <div class="ql-formats">
        <select class="ql-color">
          <option value="darkestYellow"></option>
          <option value="darkMintColor"></option>
        </select>
      </div>
</div>

//styles on Editor side
.ql-active[data-value='darkestYellow'] {
    .bubble-icon {
      background-color: transparent;
      fill: @darkestYellow
    }
}

.ql-picker-item[data-value='darkestYellow'] {
    background-color: @darkestYellow;
}

//styles on client side
.ql-color-darkestYellow {
    color: @darkestYellow
}