使用TinyMCE execCommand插入元素并保留引用

Question

使用TinyMCE4时，您可以使用

在光标处插入内容

.execCommand('mceInsertContent', false, 'content')

我需要插入内容，但保留对所述内容的引用。我试过了

var div = document.createElement('div');
tinymce.activeEditor.execCommand('mceInsertContent', false, div);

但tinyMCE会抛出错误。有几个地方已经提出了这个问题，但从未收到任何回复。例如

Reference for inserted element through execCommand (insertContent) in TinyMCE

和

http://www.tinymce.com/forum/viewtopic.php?id=35214

Answer 1

有一种方法：

var span = tinymce.activeEditor.getDoc().createElement('span');
span.setAttribute('id', 'test');
tinymce.activeEditor.execCommand('mceInsertContent', false, span.outerHTML);
var my_elem = tinymce.activeEditor.getBody().querySelector('#test');
console.log('my_elem', my_elem);

如果需要，之后删除id属性（您也可以使用类属性或其他任何东西）。