Question

我的Web应用程序基于Angular，我尝试使用ngx-quill库将Quill集成到它中。我创建了自定义嵌入式印迹，其中只包含不可修改的文本块（从数据库中检索），现在我尝试创建一个自定义工具栏，允许用户在文本中插入此印迹的实例。

我的问题是，如何在Quill工具栏中创建自定义下拉菜单，我可以提供我自己的内容，这些内容将显示给用户并插入到文本中？

我尝试这样做：

void Population::addOccurrences( std::map<Allele, size_t> immigrants ) {

std::cout<< "Size NICHE Initiale " << mSize << std::endl; //shows size before immigrants
mSize = 0; //number of individuals in the niche in total must be updates 
std::map<Allele, size_t>::iterator New; 
std::map<Allele, size_t>::iterator it; 

std::cout << "Occurrences initial" << std::endl;  //PRINTINT current distribution to check
for(it = mOccurrences.begin(); it!= mOccurrences.end(); ++it) {
    std::cout << it->first << '\t' << it->second << std::endl; 

}

std::cout << "IMMIGRANT" << std::endl; 
for(New = immigrants.begin(), it = mOccurrences.begin(); New != immigrants.end(); ++New, ++it) 
{ 
    std::cout << New->first << '\t' << New->second << std::endl; //PRINTING Immigrants genotype distribution

    it = mOccurrences.find(New->first); 
    if(it != mOccurrences.end()) {
    it->second += New->second;  //if the allele is already present in population, only add individuals
    } else { 
        mOccurences.insert(New); //else, insert the pair
    }
}

std::cout << "Occurrences final" << std::endl; //PRINTING distribution after migration
for(it = mOccurrences.begin(); it!= mOccurrences.end(); ++it) {
    mSize+= it->second; 
    std::cout << it->first << '\t' << it->second << std::endl; 

}

}

...但下拉菜单中没有显示任何值。

React和plain JS似乎已经解决了这个问题。但看起来在Angular中这样做会有点困难，特别是当使用 ngx-quill 库提供的QuillEditorComponent集成Quill时。

Answer 1

经过一段时间后，我设法做到这一点，这要归功于这个小提琴和一些游戏。See here。

component.html：

<quill-editor [(ngModel)]="editorContent"
              [options]="editorOptions" 
              (ready)="onEditorCreated($event)"
              (change)="onContentChanged($event)"></quill-editor>

component.ts：

public editor;
  public editorContent = '<h3>Type Something...</h3>';
  public editorOptions = {
     theme: 'snow',
    modules: {
        toolbar: {
        container:
        [
            [{ 'placeholder': ['[GuestName]', '[HotelName]'] }], // my custom dropdown
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

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

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                    // remove formatting button

        ],
        handlers: {
            "placeholder": function (value) { 
                if (value) {
                    const cursorPosition = this.quill.getSelection().index;
                    this.quill.insertText(cursorPosition, value);
                    this.quill.setSelection(cursorPosition + value.length);
                }
            }
        }
      }
    }
  };

  constructor(private elem: ElementRef) {

  }

  onEditorCreated(quill) {
    this.editor = quill;
    console.log('quill is ready! this is current quill instance object', quill);
  }

  onContentChanged({ quill, html, text }) {
    console.log('quill content is changed!', quill, html, text);
  }
  ngAfterViewInit() {
    // Update your dropdown with labels
    let placeholderPickerItems = this.elem.nativeElement.querySelectorAll('.ql-placeholder .ql-picker-item');
    placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);
    this.elem.nativeElement.querySelector('.ql-placeholder .ql-picker-label').innerHTML
      = 'Insert Data Field &nbsp; &nbsp; &nbsp;' + this.elem.nativeElement.querySelector('.ql-placeholder .ql-picker-label').innerHTML;
  }

输出：

Screenshot of Output

希望这有帮助！

Answer 2

对于最新的angular 8项目，配置选项位于：https://github.com/KillerCodeMonkey/ngx-quill#config

这可以通过

<quill-editor [modules]="editorOptions" ></quill-editor>

和js类

export class Component {
  editorOptions= {
      toolbar: [[{ 'list': 'bullet' }]]
  };
}

如何在Angular应用程序中添加自定义Quill工具栏

2 个答案: