admin管理员组

文章数量:1278880

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?

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?

  • plugin-development
  • javascript
  • visual-editor
  • cms
  • accessibility
Share Improve this question edited Oct 20, 2021 at 23:31 conpertura asked Oct 16, 2021 at 23:40 conperturaconpertura 55 bronze badges 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
 |  Show 11 more comments

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/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.

本文标签： plugin developmentHow do I access the contents of Wordpress Classic editor in admin area with JavaScript

版权声明：本文标题：plugin development - How do I access the contents of Wordpress Classic editor in admin area with JavaScript? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741258824a2367208.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。