我有一个上下文菜单bbCode / HTML标记器（see here），它在普通文本框中可以正常工作，但在可内容编辑的元素（例如Blogspot和Wordpress中的编辑器的WYSIWYG模式，尽管在代码模式下也是如此。
我想添加此功能，因为我想添加符号，™€⅔®等，将直接在富文本编辑模式中有用。
对于文本模式框，我使用document.activeElement.value获取框的内容，使用clickedElement.selectionStart获取选择的开始，并使用clickedElement.selectionEnd获取选择的结束，这使我可以处理参数。
对于所见即所得模式，所有这些元素都会失败。
我可以使用document.activeElement.id获取iframe的ID，但是当我尝试获取document.getElementById时，它会失败：
framename= document.activeElement.id;
console.log(framename); // in this case, gives "postingComposeBox"
framename = document.getElementById(framename);
console.log("framenamex",framename);
给予framenamex <unavailable>
因此，我甚至无法确定光标位置并插入符号。
这既适用于Blogspot，也适用于Wordpress的tinyMCE编辑器的丰富模式。
代码模式（纯文本）可以很好地工作，其中document.activeElement.value给出了框的内容，clickedElement.selectionStart和clickedElement.selectionEnd给出了光标和选择的位置。
一个典型的编辑器iframe（使用Blog Spot，fyi）看起来像这样：
<iframe style="padding: 0px; background-color: white; height: 100%;" class="composeBox editable" id="postingComposeBox" name="Rich text editor" aria-label="Edit post. Compose mode." frameborder="0">
<html style="background:none transparent;min-width:0;">
<head>
<style>
<!-- omitted for brevity -->
</style>
</head>
<body g_editable="true" hidefocus="true" class="editable " id="postingComposeBox" style="min-width: 0px; width: 653px;" role="textbox" contenteditable="true">
<!-- some random text I typed in the box -->
<p>[b][b][b][b][b]aaa[/b]</p>
<p>bbb</p>
<p>[b]ccc[/b][/b][/b][/b][/b]</p>
<!-- end of random text in the box -->
</body>
</html>
</iframe>```