Question

我正在使用QuillJS和Angular ngx-羽毛笔库。我想创建仅具有四种颜色的自定义颜色选择器，然后在输出中获得以下内容

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

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

<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
}

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

1 个答案: