javascript 如何在tinymce中的光标位置插入图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5192134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To insert an image at cursor position in tinymce
提问by Mohan Ram
I am using following codes to fetch the conent of tinymce.
我正在使用以下代码来获取 tinymce 的内容。
tinymce_content=tinyMCE.get('txt_area_id').getContent();
updated_content=tinymce_content+"<img src="sample.jpg">";
By using above codes i am inserting image inside tinymce content.
通过使用上面的代码,我将图像插入到 tinymce 内容中。
Question:How to insert image in the cursor position inside tinymce (ie) How to predict cursor position and split the content to insert image between fetched content.
问题:如何在tinymce内的光标位置插入图像(即)如何预测光标位置并拆分内容以在获取的内容之间插入图像。
Thanks in advance
提前致谢
回答by Thariama
This will insert an image node at the selected spot (cursor position) in a tinymce editor
这将在 tinymce 编辑器中的选定位置(光标位置)插入一个图像节点
var ed = tinyMCE.get('txt_area_id'); // get editor instance
var range = ed.selection.getRng(); // get range
var newNode = ed.getDoc().createElement ( "img" ); // create img node
newNode.src="sample.jpg"; // add src attribute
range.insertNode(newNode); // insert Node
回答by tgray
@Thariama's answerworked fine for me in Chrome, but not in IE. I had to modify it to the following to get it to work in both browsers:
@Thariama 的回答在 Chrome 中对我来说效果很好,但在 IE 中则不然。我必须将其修改为以下内容才能使其在两种浏览器中都能正常工作:
var ed = tinyMCE.get('txt_area_id'); // get editor instance
var newNode = ed.getDoc().createElement ( "img" ); // create img node
newNode.src="sample.jpg"; // add src attribute
ed.execCommand('mceInsertContent', false, newNode.outerHTML)
(IE was telling me that rangedid not have an insertNodemethod.)
(IE 告诉我range没有insertNode方法。)

