Динамический экземпляр редактора QuillJS

Question

(я собираюсь предисловие к этому с тем, что я новый разработчик javascript, и я уверен, что у меня есть пробелы в моих знаниях о том, как javascript/angular/quill работают вместе на страница.)

Я хочу знать, возможно ли это. Вместо того, чтобы создавать экземпляр редактора в теге скрипта на странице, я хочу создать экземпляр редактора для div, когда он будет нажат. Я использую Угловой контроллер для моей страницы, и внутри по щелчку события я создал для DIV, я попробовал несколько вещей:

editor = new Quill(myDiv, { 
     modules: { toolbar: '#toolbar' }, 
     theme: 'snow' 
     }); 

Но это не сработало, так что я подумал, что у меня был явно передать идентификатор DIV:

editor = new Quill('#editor', { 
     modules: { toolbar: '#toolbar' }, 
     theme: 'snow' 
     }); 

Это не сработало, и не фокусировались внутри DIV и позвольте мне изменить. Поэтому я подумал, что проблема в том, что я захватил событие click с угловым, и, возможно, мне нужно переключить фокус на div после создания экземпляра редактора. Поэтому я создал директиву фокуса (просто скопировал/вставлял из другой статьи SO), которая отлично работала при тестировании на входе.

app.directive('focusOn', function() { 
return function (scope, elem, attr) { 
    scope.$on(attr.focusOn, function (e) { 
     elem[0].focus(); 
    }); 
}; 

затем в функции по щелчку в угловом контроллере:

$scope.$broadcast('focussec123'); 
        if (editor == null) { 
         editor = new Quill('#editor', { 
          modules: { toolbar: '#toolbar' }, 
          theme: 'snow' 
         }); 
        } 

Это работало, чтобы выбрать текст внутри DIV, но не показывать панель инструментов, и поэтому я подозревал, что это Ждут» t действительно работает. Я уверен, что я неправильно понимаю некоторые взаимодействия, и я полностью осознаю, что мне не хватает большого количества необходимых знаний о JS. Моя нижняя линия Я хочу знать:

1. Можно ли динамически создать экземпляр редактора только для текущего раздела, и для конкретизации редактора снова для другого раздела, когда он получает щелкнул, и т.д.
2. Если так , как?

Заранее спасибо.

Answer 1

Да, вы можете создавать экземпляры Quill динамически, нажав на <div>. Это именно то, что мы делаем.

Вот как (примерно):

export class TextbocComponent ... { 
    private quill: Quill; 
    private target: HTMLElement; 
    private Quill = require("quill/dist/quill"); 

    private onParagraphClicked(event: MouseEvent): void { 
     const options = { 
      theme: "bubble" 
     }; 

     if (!this.quill) { 
      this.target = <HTMLElement>event.currentTarget; 

      this.quill = new this.Quill($(target).get(0), options); 

      $(target).children(".ql-editor").on("click", function(e) { 
       e.preventDefault(); 
      }); 
     } 

     this.quill.focus(); 

     event.stopPropagation(); 
     event.preventDefault(); 
    } 
}