如何在quill.js的工具栏中创建自定义下拉菜单

Question

我正在使用 quill.js 在我的项目中创建一个编辑器。到目前为止，我已经成功地将 quill 与我的 web 项目集成。现在我想做的是在 quill 工具栏中创建一个自定义下拉菜单。下拉菜单将具有以下选项 1)邮箱 2）简单的会议说明 当选择电子邮件选项时，编辑器加载电子邮件模板等。 谁能帮助我实现这一目标......

下面是我的代码

        var toolbarOptions=
     [
       ['bold','italic','underline','strike'],
       ['blockquote','code-block'],
       [{ 'header': 1 }, { 'header': 2 }],               
       [{ 'list': 'ordered'}, { 'list': 'bullet' }],
       [{ 'script': 'sub'}, { 'script': 'super' }],      
       [{ 'indent': '-1'}, { 'indent': '+1' }],          
       [{ 'direction': 'rtl' }],                         

       [{ 'size': ['small', false, 'large', 'huge'] }],  
       [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

       [{ 'color': [] }, { 'background': [] }],
       [{ 'font': [] }],
       [{ 'align': [] }],

       ['clean']    
       ]; 



       var quill = new Quill('#editor', {
       theme: 'snow',
       placeholder: 'Compose an epic message...',
       readOnly: false,
       modules: {
       history: {
       delay: 2000,
       userOnly: true
        },
    toolbar: {
  container: toolbarOptions,
  handlers: {
    undo: function(value) {
      this.quill.history.undo();
    },
    redo: function(value) {
      this.quill.history.redo();
    }
  }
}
}
 });  

Answer 1

快速浏览一下 Quill 文档，发现 Quill 本身并不允许对工具栏进行自定义添加，但这并不意味着您不能这样做。

最简单的方法是使用 javascript 将下拉菜单手动插入到工具栏中，就像在另一个元素中插入任何元素一样。另外，将 onchange 处理程序（请参阅：Dropdown using javascript onchange）绑定到下拉列表，以便它与 quill 交互并将内容设置为您想要的预定义 Delta 对象。

您可以查找要创建的增量对象，方法是首先在普通 Quill 编辑器中将其写出，然后调用 quill.getContents() 并将其转换为 JSON。然后，通过调用 quill.setContents() (http://quilljs.com/docs/api/#setcontents) 将下拉更改后的内容设置为通过上述方法预先计算的 Delta。

Answer 2

最后我找到了一个解决方案，不是最好的，但我希望这是一个很好的解决方案，并且在我的情况下它适用于100％。

如果短你需要添加这2行

::ng-deep .ql-snow .ql-picker.ql-custom-line-height .ql-picker-label[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

::ng-deep .ql-snow .ql-picker.ql-custom-line-height .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

这是我的完整代码

component.ts

import {QuillEditorComponent, QuillModules, QuillViewComponent, QuillViewHTMLComponent} from "ngx-quill";
import {FormsModule} from "@angular/forms";
import {JsonPipe} from "@angular/common";

@Component({
  selector: 'app-ngx-quill-demo',
  standalone: true,
  imports: [
    QuillEditorComponent,
    QuillViewComponent,
    QuillViewHTMLComponent,
    FormsModule,
    JsonPipe
  ],
  templateUrl: './ngx-quill-demo.component.html',
  styleUrl: './ngx-quill-demo.component.css'
})
export class NgxQuillDemoComponent {
  @ViewChild(QuillEditorComponent, {static: false}) quillEditor!: QuillEditorComponent;

  lineHeight = '1'
  content: any = '<p>Hello World</p>'
  modules: QuillModules = {
    toolbar: {container: '#custom-toolbar'},
  };


  setLineHeight(value: string) {
    if (this.quillEditor) {
      const editorElement = this.quillEditor.editorElem?.querySelector('.ql-editor') as HTMLElement;
      if (editorElement) {
        editorElement.style.lineHeight = value;
      }
    }
  }

  lineHeightChanged() {
    this.setLineHeight(this.lineHeight);
  }
}

component.html

  style="width: 100%"
  [style.line-height]="lineHeight"
  [(ngModel)]="content"
  [modules]="modules"
  format="object">
</quill-editor>

<div id="custom-toolbar">
    <span class="ql-formats">
      <button type="button" class="ql-bold"> </button>
      <button type="button" class="ql-italic"> </button>
      <button type="button" class="ql-align" value=""></button>
      <button type="button" class="ql-align" value="center"></button>
      <button type="button" class="ql-align" value="right"></button>
      <button type="button" class="ql-align" value="justify"></button>
    </span>

  <select class="ql-size">
    <option value="small">Small</option>
    <option selected value="normal">Normal</option>
    <option value="large">Large</option>
    <option value="huge">Huge</option>
  </select>

  <!-- Custom Line Height Dropdown -->
  <select class="ql-custom-line-height"
          data-label="'My Line Height'"
          [title]="'Line Height'"
          [(ngModel)]="lineHeight"
          (ngModelChange)="lineHeightChanged()">
    <option value="1" selected>Default</option>
    <option value="1.5">1.5</option>
    <option value="2">2.0</option>
    <option value="2.5">2.5</option>
    <option value="3">3.0</option>
  </select>
</div>

component.css

  /*This is not must*/
  min-width: 150px;
}

::ng-deep .ql-snow .ql-picker.ql-custom-line-height .ql-picker-label[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

::ng-deep .ql-snow .ql-picker.ql-custom-line-height .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

注意 我在这段代码中唯一不喜欢的情况是我使用了

 ::ng-deep

祝你一切顺利，我希望这能帮助你，当我在挣扎时，我找不到这会起作用。 🎉🎉🎉