I’m engaged on a small plugin to help visually impaired customers in writing WordPress weblog posts. I want to give sure components ( e. g. each desk) within the editor their very own background shade. The plugin makes use of JavaScript to seek out these areas and assigns html tags with a css class.
In response to Chrome Developer instruments, the WordPress admin space to create or edit posts consists of an ordinary web site physique component, after which a second physique component which incorporates all html tags pertaining to the put up:
<physique id="tinymce" class="mce-content-body content post-type-post post-status-publish post-format-standard page-template-default locale-de-de mceContentBody wp-editor wp-autoresize html5-captions" data-id="content" dir="ltr" model="overflow-y: hidden;" contenteditable="true"><p>Put up content material</p></physique>
Whereas I can entry all components above on the web page, I can not entry this second physique tag with doc.querySelector(".wp-editor"), which returns null.
Does WordPress encapsulate this entry ultimately?
How can I make the contents of the editor accessible to my JavaScript?