動態實例化QuillJS編輯器

（我要說的是，我是一個新的JavaScript開發人員，並且我確信在我的關於javascript/angular/quill如何在頁。）動態實例化QuillJS編輯器

我想知道這是否可能。我不想在頁面上的腳本標記中實例化編輯器，而是想要在單擊時爲div實例化編輯器。我使用的角度控制我的網頁，並在單擊事件我設置了DIV中，我嘗試了幾件事情：

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

但沒有工作，所以我想也許我有要明確地通過div的ID：

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內的文本，但它並沒有顯示工具欄，所以我懷疑它沒」真的有用。我確信我誤解了一些互動，並且我完全意識到我缺乏關於JS的許多必要知識。我的底線是，我想知道：

是否有可能動態實例只對當前部分的編輯器，它被點擊時，另一部分再次實例化編輯器等
如果是這樣，怎麼樣？

在此先感謝。

來源

2017-01-16 Christie Frieg

是的，您可以通過點擊<div>動態創建Quill實例。這正是我們所做的。

那怎麼（大約）：

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(); 
    } 
}

來源

2017-01-17 16:37:27 Tom

動態實例化QuillJS編輯器

回答

相關問題