KillerCodeMonkey / ngx-quill

Angular (>=2) components for the Quill Rich Text Editor
MIT License
1.79k stars 262 forks source link

What is the "quill-editor-toolbar" equivalent for color pickers #245

Closed bogacg closed 6 years ago

bogacg commented 6 years ago

I wanted to make custom toolbar with title properites so I've used the example provided:

<quill-editor>
  <div quill-editor-toolbar>
    <span class="ql-formats">
      <button class="ql-bold" [title]="'Bold'"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
  </div>
</quill-editor>

While it works great for given axample I couln't figure what HTML element corresponds for color pickers

I've tried this: <button class="ql-color ql-picker ql-color-picker" [title]="'Char Color'"></button> with no luck.

KillerCodeMonkey commented 6 years ago

I think You Can Check Out the example on quilljs Website and copy the html for the colorpicker.

Or create it with ngx-quill and a toolbar config passed to the components. And copy the html from it.

Bogac Guven notifications@github.com schrieb am So., 16. Sep. 2018, 23:40:

I wanted to make custom toolbar with title properites so I've used the example provided:

While it works great for given axample I couln't figure what HTML element corresponds for color pickers

I've tried this: <button class="ql-color ql-picker ql-color-picker" [title]="'Char Color'"> with no luck.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/245, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYDiO2e2Ix8f7C0utUVaCHFFpPq4Dks5ubsVHgaJpZM4WrDtK .

bogacg commented 6 years ago

Wow, you are right, I didn't expect it would be this easy:

<span class="ql-formats">
  <select class="ql-color" [title]="'Char color'">
  </select>
  <select class="ql-background" [title]="'Bg color'">
  </select>
</span>

I didn't expect it could be just a select element with options, then a search on quilljs and I saw this example.

JayawardhanaJTH commented 2 years ago

Wow, you are right, I didn't expect it would be this easy:

<span class="ql-formats">
  <select class="ql-color" [title]="'Char color'">
  </select>
  <select class="ql-background" [title]="'Bg color'">
  </select>
</span>

I didn't expect it could be just a select element with options, then a search on quilljs and I saw this example.

My problem solved this example, Thank you