使用 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 属性（您也可以使用 class 属性或其他任何属性）。

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

Insert element using TinyMCE execCommand and retain a reference

javascript

tinymce

tinymce-4