Question

我使用ng2-bootstrap为我的Angular 4应用程序： https://www.npmjs.com/package/ng2-modal

我在模态中使用了TinyMCE编辑器。在bootstrap模式中运行TinyMCE编辑器很痛苦，我看到每个人都在网上论坛上抱怨它。做一些研究我发现编辑器将在bootstrap模态下工作，如果它在模态打开后初始化，那么这就是我所做的：

initialize() {
 setTimeout(() => {
  tinymce.init({
    selector: '#editor',
    plugins: ['link', 'table', 'lists'],
    skin_url: '/assets/skins/lightgray',
    toolbar: [
      'bold italic underline
    ],
    statusbar: false,
    link_context_toolbar: false,
    default_link_target: '_blank',
    link_assume_external_targets: true,
    setup: editor => {
      this.editor = editor;
      editor.on('keyup change', (e) => {
        const content = editor.getContent();
      });
    }
  });
}, 1000);
}

并且我在模态打开后运行此初始化（通过调用＆on;开启＆ng;以及ng2-bootstrap＆＃39; s模式提供的事件）。这种方法非常合适，但唯一的问题是编辑器在1秒后出现，这是一个非常糟糕的用户体验。那么如何才能确保初始化仅在模态打开后发生（除了对其进行超时）？

Answer 1

您正在使用的特定Github项目仅发出3个事件，因此您仅限于发出的事件。

通过查看源代码，事件是：

@Output()
public onOpen = new EventEmitter(false);

@Output()
public onClose = new EventEmitter(false);

@Output()
public onSubmit = new EventEmitter(false);

其中一个是onOpen - 如果在触发onOpen时DOM元素存在，那么您可以在此时运行init。它们的关键是在DOM元素在页面上可用之前不运行init调用。

我会注意到该项目的Git仓库已归档，因此如果代码需要增强功能，您可能无法获得回购所有者的任何帮助。

TinyMCE与ng2-modal

1 个答案: