2017-12-01 8 views
0

で正常に動作しません: https://www.npmjs.com/package/ng2-modalTinyMCEのは、私は私の角度4アプリケーションのためのNG2-ブートストラップを使用していNG2モーダル

と私はモーダル内部のTinyMCEエディタを使用しています。ブートストラップモードでTinyMCEエディタを実行するのは苦痛で、オンラインフォーラムで誰もがそれに不平を感じていました。私はそれがモーダルが開いている後に初期化されている場合、エディタは、ブートストラップモーダルで動作することが分かったいくつかの研究を行う ので、これは私がやったことです:

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

と私はモーダルされた後、これは初期化実行していますよopen(ng2-bootstrapのモーダルが提供する 'onOpen'イベントのメソッドを呼び出す)。このアプローチは完璧に機能しますが、唯一の問題は1秒後にエディタが表示されることです。これは本当に悪いユーザーエクスペリエンスです。では、初期化はモーダルが開いた後でのみ起こることを確認するにはどうすればいいですか?

答えて

0

あなたが使用しているその特定のGithubプロジェクトでは、3つのイベントしか出力されないため、イベントが発生するイベントに限定されています。

イベントがあるソースコードを見てから:それらの

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

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

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

一つonOpenある - onOpenは、その時点で、あなたのinitを実行することができますトリガされたときにDOM要素が存在する場合。それらのキーは、DOM要素がページ上で利用可能になるまで、init呼び出しを実行しないことです。

このプロジェクトのGitリポジトリはアーカイブされているので、コードに機能拡張が必要な​​場合は、レポオーナーから助けを得られない可能性があります。

+0

@Michaelさんの返事に感謝しますが、私が最初にしたことはthats働いていません。このonOpenイベントがいつ呼び出されるのか分かりませんが、DOM上にモーダルがレンダリングされた後は、そのイベントが発生するとは思われません。 – Aiguo

関連する問題