я импортировал установленный перо, но проблема с пользовательским интерфейсом - PullRequest
Новая
       53

я импортировал установленный перо, но проблема с пользовательским интерфейсом

1 голос
/ 05 апреля 2019

Ну, я последовал примеру https://www.youtube.com/watch?v=Sh3_k_QPGzw

Я не получаю панель инструментов Quill, как показано в любом из примеров the image attached is the User interface i get after the quill implementation

<div style="text-align:center">
<div class="container-fluid">
<div class="row pt-5">
<div class="col-md-8">

<form [formGroup]="editorForm" (ngsubmit)="onSubmit()">
<div class="form-group">
      <label for="editor"><h3>editor</h3></label>
      <quill-editor></quill-editor>
    </div>
  </form>
</div>

1 Ответ

2 голосов
/ 05 апреля 2019

Я только что попробовал ваш пример: 

<div class="form-group">
    <label for="editor"><h3>editor</h3></label>
    <quill-editor></quill-editor>
</div>

Результат:

enter image description here

Работает нормально, показывая все стандартные панели инструментов-элементы, поэтому убедитесь, что вы также импортировали quill.snow.css и quill.bubble.css

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

в своем HTML и 

@import "./app/quill/quill-emoji.css";
@import "./app/quill/quill-mention.css";

в своем styles.css.

ЕслиВы используете свой собственный контейнер панели инструментов, вам также нужно создать внутри него кнопки.

Из официальных документов: 

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
      }
    }
  }
});

Поскольку опция контейнера является настолько распространенной, сокращение верхнего уровнятакже допускается. 

var quill = new Quill('#editor', {
  modules: {
    // Equivalent to { toolbar: { container: '#toolbar' }}
    toolbar: '#toolbar'
  }
});

Официальная документация и несколько хороших примеров:

...