Chrome “Developer Tools” to the rescue. Literally: to salvage a pending forum post.
Posted by jpluimers on 2016/06/02
Lessons learned
- Don’t trust online text entry.
- Always compose answers in an external text editor, preferably one that understands the markup used (Atom often is a good choice).
- Post when ready.
- Wonder why every forum software seems to have invented their own markup.
The story
A few weeks ago, while composing an extensive answer on the Scooter Software: Home of Beyond Compare (a tool which – like any development tool – I really love, but sometimes hate): Keyboard handling driving me nuts: how to make it work like BC for Windows, I pressed the “Image” button which:
- Made all the edited text to dim and non-selectable
- Failed an image selection to show
It was more than an hour of work, so I was determined to try obtaining at least the post text.
The salvage process
I started the Chrome “Developer Tools” drilling down the elements to see where the HTML was containing the edited text. It took a while to drill through layers, nested divs, spans and tables but I finally found they use vBulletin Quick Reply editor having these nested elements:
Often a textarea does not have content text and this case proved no exception. The QuickReply editor had to store the content somewhere and my first guess was in the Chrome DOM. Luckily I found out the Developer Tools give can access the value property through the DOM using the console. And textarea has a DOM counterpart HTMLTextAreaElement with a value property containing the ext.
With the console.dir method, you can dump the whole element (you can also use console.log but it can behave differently).
Anyway: this was the salvage code:
console.dir(document.getElementById("cke_contents_vB_Editor_QR_editor").firstChild.value);
To BBcode or almost BBcode
Since vBulletin uses a markup similar to BBcode as markup (boy why did about every forum software invent their own markup…), and there is a bbcode language plugin for Atom (use the .bb or .bbcode file extensions to activate it; be prepared for some quoting deficiencies) I finished the post in Atom, then tried to submitted it.
Big mistake: vBulletin BBcode is too far from “real” BBcode, so I finally posted on gist, then put the URL on the forum.
So I did ask around how to install bbcode-preview, but didn’t install it.
If you need it, here is how to install it (thanks @xenoveritas):
@jpluimers: @xenoveritas how can I install https://github.com/Xenoveritas/bbcode-preview in atom?
@xenoveritas: @jpluimers Assuming it still works, check it out into the “packages” directory of your Atom config folder
@xenoveritas: @jpluimers Oh, that won’t work. You can use the “apm” command line program to do it but… be warned you need a compiler.
@xenoveritas: @jpluimers Should be “apm install Xenoveritas/bbcode-preview”
–jeroen
Leave a Reply