我根据此处提供的指南在我的angular2应用中使用tinyMCE:https://www.tinymce.com/docs/integrations/angular2/
现在我想像ng2-dnd一样放弃目标:
<textarea dnd-droppable (onDropSuccess)="itemDropped($event)" id="{{elementId}}"></textarea>
但是,没有事件被触发。我想这与tinyMCE用iframe替换textarea有关,但是我还不熟悉angular2来理解如何在这里应用以下链接。 How to make tinymce textarea editor droppable?
提前感谢任何建议!
答案 0 :(得分:1)
有些问题导致这种情况无效。
首先,如前所述,TinyMCE有自己的元素,包括用于渲染实际编辑器的iframe。 iframe导致编辑器中的事件不会向上冒泡。
将dnd-droppable添加到最终被隐藏的texarea中,不会让任何可见元素掉落。
在textarea周围添加div元素会在TinyMCE标题中为您提供一个可放置区域,但遗憾的是不在编辑器中。 (由于iframe)。
但是,使用TinyMCE内置事件,您仍然可以将编辑器用作放置目标。您还需要添加&#39; paste_data_images&#39;属性。
tinymce.init({
selector: '#' + this.elementId,
plugins: ['link', 'paste', 'table'],
skin_url: 'assets/skins/lightgray',
paste_data_images: true,
setup: editor => {
editor.on('drop', e => {
console.log(e);
});
}
});
请注意,您收到的drop事件是标准的drop事件,不会使用dnd处理。我认为这对你的情况很好,如果没有,你可以转向dnd文档来进一步处理它。