samclarke / SCEditor

A lightweight HTML and BBCode WYSIWYG editor

Home Page:http://www.sceditor.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Editor body no longer responds to innerHTML

tehohn opened this issue · comments

Tested in 96.0.2 (64-bit) Firefox and 97.0.4692.71 (Official Build) (64-bit) Chrome.

I have a custom function that alters the content of a given set of HTML tags in the editor body when a user triggers this function via a regular button in the HTML document.
So the user can mark a bunch of lines, and with one button click tweak the marked content in the editor body.
(Yes, I tried to get this to work via a custom button in the editor toolbar, but that wouldn't work since I need to run a bit of PHP code in the function. So I ended up doing it via a separate button that reloads the page, allowing the PHP part to run in-between.)
My custom button generates a few lines of JavaScript at the bottom of the HTML document (after the editor is created) to make the alteration of the tags.

Up till version 3.0.0 of SCEditor it has worked just fine. But with 3.1.0 and 3.1.1 it's not working anymore.

This is the script generated at the bottom of the HTML document from the PHP code:

<script>
  var scBody = sceditor.instance(textarea).getBody();
  var subTexts = scBody.getElementsByTagName("sub");
  subTexts[0].innerHTML = "Testing (altered content)";
</script>

The first two lines of the javaScript do work and when printing the content of the subTexts[] array to console the altered content of the tags is printed. So it appears that in the browser the tags have updated.
But then in the editor window, nothing happens... The page reloads and all the relevant functions execute. But the <sub> tags remain the same as they where before. On screen they do not update. When inspecting the HTML page the tags also look unchanged.

To make matters worse, if I run the last line 'subTexts[0].innerHTML = "Testing";' via the browser console exactly as it is in the inline script tag, then the tag contents update just fine!
So everything should be working. But it's not showing on screen. The Javascript code should technically be fine and the first lines in the inline code do run, otherwise the subTexts[] array would not be populated, but it is!
In the console when I run:

console.log(subTexts[0].innerHTML);
console.log(subTexts[0]);

Both display the altered content, as should be. So it seems the DOM objects has been updated.

Still the SCeditor body refuses to update on screen when the code is run inline in the HTML document. It's like the innerHTML line in the inline code is just not working. But when I run it manually after the fact, it does work!
And there are no errors thrown in the console at any point.

I am at my wits end here. My brain is fried. Nothing in the local code has changed. But something in the SCeditor code has apparently changed so that our code is no longer working. And I can not see how it possibly could do this. For some reason SCeditor is displaying a different content on screen then the actual content in the DOM.

If anyone has any clue to what is going on here. I'd appreciate some help.

This is a little embarrassing, but I just found the solution to the problem in the docs...
After having banged my head against the wall for a long time. I finally realized that maybe the generated editor body needs to update itself. And turns out it does.
RTFM right...

I have now added the line:
sceditor.instance(textarea).updateOriginal();
At the end of my script and everything then works fine again.

Hopefully this might still help someone else with a similar issue.

Thanks anyway, I guess explaining the problem here helped me define it in my head enough to realize the solution :)