ngx-quill не может отображать выпадающий ярлык - PullRequest
Новая
       35

ngx-quill не может отображать выпадающий ярлык

0 голосов
/ 19 октября 2018

Я создаю собственное выпадающее меню в Quill.Я использую пергамент 

var Parchment = Quill.import('parchment');
    var lineHeightConfig = {
      scope: Parchment.Scope.INLINE,
      whitelist: [
        '1.0',
        '5.0',
        '10.0'
      ]
    };
    var lineHeightClass = new Parchment.Attributor.Class('lineheight', 'ql-line-height', lineHeightConfig);
    var lineHeightStyle = new Parchment.Attributor.Style('lineheight', 'line-height', lineHeightConfig);
    Parchment.register(lineHeightClass);
    Parchment.register(lineHeightStyle);

Я определил мой редактор в виде: 

<quill-editor #editor >
<div quill-editor-toolbar>
          <!-- Basic buttons -->
          <span class="ql-formats">
            <button class="ql-bold" [title]="'Bold'"></button>
            <button class="ql-italic" [title]="'Italic'"></button>
            <button class="ql-underline" [title]="'Underline'"></button>
          </span>

          <span class="ql-formats">
            <select class="ql-lineheight" [title]="'Line Height'">
              <option selected></option>
              <option value="1.0"></option>
              <option value="5.0"></option>
              <option value="10.0"></option>
            </select>      
          </span>          
    </div>

</quill-editor>

И я добавляю некоторые определения CSS: 

.ql-snow .ql-picker.ql-lineheight{
  width: 58px;

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.0"]::before {content: "1.0";}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.0']::before {content: '1.0' !important;}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5.0']::before {content: '5.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5.0']::before {content: '5.0' !important;}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='10.0']::before {content: '10.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='10.0']::before {content: '10.0' !important;}

Отображается новый выпадающий списоки работает, но метки все еще пусты.

Здесь a stackblitz

1 Ответ

0 голосов
/ 19 октября 2018

Не совсем уверен, что это правильный способ сделать это ... Я использовал AfterViewInit 

  ngAfterViewInit() {
    var lineheightToolbarButton = document.querySelector('.ql-lineheight');
    var lineheightButtonLabel = document.getElementsByClassName('ql-picker-label')[0]
    lineheightButtonLabel.innerHTML = "line height"+lineheightButtonLabel.innerHTML
    var lineheightItems = document.getElementsByClassName('ql-picker-item')

    for (var i = 0; i < lineheightItems.length; i++) {
       lineheightItems[i].innerHTML = lineheightItems[i].getAttribute('data-value')
    }
  }
...