Question

我有一个上下文菜单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>```

Firefox Webextension：无法获取Iframe

0 个答案: