0

I am working on a small Wordpress plugin which uses JavaScript to add html tags with a css class to the visual text view in the Wordpress editor. I use the Classic Editor.

According to Chrome Developer tools, the visual text editor consists of a few div elements, and then an iframe element with the id "content_ifr" which loads a second body element which then contains all html tags pertaining to the post:

<body 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" style="overflow-y: hidden;" contenteditable="true"><p>Post content</p></body>

I have already figured out that I can access this second body element with

document.getElementById("content_ifr").contentDocument.body

But this only works with manual input in the console, after everything has loaded. It doesn't work in the JavaScript file of the plugin which the plugin's php file loads via wp_enqueue_scripts. The corresponding variable always returns null.

How can I make the contents of the Classic editor accessible to the JavaScript file of my plugin?

Improve this question
16
  • 1
    Are you using the classic editor or the block editor?
    – Jacob Peattie
    Commented Oct 17, 2021 at 0:36
  • are you referring to the insides of the classic editor tinymce iframe? Or are you using the block editor? It's not clear, and each has a unique answer
    – Tom J Nowell ♦
    Commented Oct 17, 2021 at 1:03
  • @TomJNowell I am using the classic editor. But I would like my plugin to work for both, so I am interested in both answers!
    – conpertura
    Commented Oct 18, 2021 at 11:01
  • @JacobPeattie I edited my question to reflect your feedback.
    – conpertura
    Commented Oct 18, 2021 at 11:13
  • @conpertura the answer for the block editor will be totally different from the classic editor answer, there is no overlap. Your approach might work for the classic editor, but it will not work for the block editor and will need a brand new approach from the ground up. A single solution that works for both is impossible
    – Tom J Nowell ♦
    Commented Oct 18, 2021 at 13:08

1 Answer 1

Reset to default
1

To get the editor content as a string in the classic editor use this:

content = tinymce.activeEditor.getContent();

Taken from https://stackoverflow.com/a/5843951/57482

Note that you should use the APIs provided rather than directly modifying the DOM if you want to modify the content. If you don't, you won't update plugins local states in javascript causing problems. Modifying the DOM should be a last resort.

Also note that this will not work for the block editor. The block editor requires a completely different approach, and you can't then edit the content and put it back without breaking the blocks or turning everything into a custom HTML block causing other issues.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.