Getting the Value of a Rich Text/ HTML Edit Box

Add-ons Development
1

I can reliably get the value of a text type input box using let txtcont = clickedElement.value;.

I use this because some of the text entry boxes do not have an ID attached.

In blogger, for example, if you do the html editing element (plain text where you manually code the html), which is an element like this:
<body g_editable="true" hidefocus="true" class="editable " id="postingComposeBox" style="min-width: 0px; width: 653px;" role="textbox" contenteditable="true"><br></body>

You get the value from the the above.

If you switch to “Compose” mode, where the html is displayed as rendered as styled (bold, italic, etc):
<body g_editable="true" hidefocus="true" class="editable " id="postingComposeBox" style="min-width: 0px; width: 653px;" role="textbox" contenteditable="true"><br></body>
I do not extract the value, clickedElement.value; is undefined.

What am I missing?

2

These are just normal html element with contenteditable, so you are directly editing HTML. Thus the “value” (which is an input specific property) is the innerHTML property.

3

I thought that the use of innerHTML was frowned upon for extensions, so how do I access the value?

4

It’s perfectly fine for reading, it’s the writing to it that is frowned upon.

1 Like
5

Thanks.

I tried to assign a variable toclickedElement.innerHTML, and I am getting that it is undefined, though clickedElement.outerHTML does give a value:

<textarea aria-label="Edit post. Html mode." class="htmlBox" cols="100" id="postingHtmlBox" key="postBody" rows="50" wrap="soft"> </textarea>

6

So it’s a text area now? textareas have a value property. The code you posted previously was a <body> with contenteditable set.

This seems like a wysiwyg editor where you’re not reading the value from the correct place.

7

It’s definitely a wysiwyg editor being odd, and I have experienced it in both of the wysiwyg modes of Blogger and Wordpress, but they both work fine in the text/manual coding modes.

8

OK, both the BP and blogger rich text boxes have a body embedded in an iframe, and in blogger’s case, the body and the iframe both have the same id:

<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">
         <p>[b][b][b][b][b]aaa[/b]</p>
         <p>bbb</p>
         <p>[b]ccc[/b][/b][/b][/b][/b]</p>
      </body>
   </html>
</iframe>

Not sure why this is not returning the inner html.

9

I realize this question is off-topic, but I wonder this is a serious need of your users. Who is using BBCode (or other coding tags) in a rich text editor?

10

The utility does bbcode, html, vbulletin, etc.

The addon page is here.

I was using bbCode in a rich text editor for testing because it is preserved, and not parsed, when one switches back and forth between rich text and code mode.

On edit

Also, there are times where I paste in quoted text while the Blogger editor is in rich text mode using BBCodeXtra, the old extension, and it works.

11

OK, I have a solution, this will get the data in a rich text field:
document.getElementById(document.activeElement.id).contentWindow.document.body.innerHTML

So I put in an if to detect when the get clicked element does not work:

let txtcont = clickedElement.value; //contents of edit box
	if (txtcont === undefined) {
		txtcont = document.getElementById(document.activeElement.id).contentWindow.document.body.innerHTML;
	}

For future reference.

12

You should be able to shorten document.getElementById(document.activeElement.id) to just document.activeElement since they’re exactly the same reference.

1 Like
13

Also, I am planning to add symbols, things like™ € ⅔ ®, which should be inserted into rich text edit boxes.