动态实例化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编辑器

回答

相关问题