首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用JavaScript访问管理区域Wordpress经典编辑器的内容?

如何使用JavaScript访问管理区域Wordpress经典编辑器的内容?
EN

WordPress Development用户
提问于 2021-10-16 23:40:32
回答 1查看 423关注 0票数 0

我正在开发一个小型Wordpress插件,它使用JavaScript将带有css类的html标记添加到Wordpress编辑器中的可视文本视图中。我用的是经典编辑。

根据Chrome工具,可视化文本编辑器包括几个div元素,然后是一个带有id "content_ifr“的iframe元素,该元素加载第二个body元素,该元素随后包含与post相关的所有html标记:

代码语言:javascript
复制
<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>

我已经知道,我可以访问第二个身体元素

代码语言:javascript
复制
document.getElementById("content_ifr").contentDocument.body

但是这只适用于控制台中的手动输入,在加载完所有内容之后。它不能在插件的JavaScript文件中工作,插件的php文件是通过wp_enqueue_scripts加载的。对应的变量总是返回null。

如何使我的插件的JavaScript文件可以访问经典编辑器的内容?

EN

回答 1

WordPress Development用户

回答已采纳

发布于 2021-10-21 11:41:25

要在经典编辑器中将编辑器内容作为字符串获取,请使用以下命令:

代码语言:javascript
复制
content = tinymce.activeEditor.getContent();

取自https://stackoverflow.com/a/5843951/57482

注意,如果要修改内容,则应该使用所提供的API,而不是直接修改DOM。如果不这样做,就不会更新javascript中的插件本地状态,从而导致问题。修改DOM应该是最后的手段。

还请注意,这将不适用于块编辑器。块编辑器需要一种完全不同的方法,您不能然后编辑内容并将其放回原处而不破坏块或将所有内容转换为一个自定义HTML块,从而导致其他问题。

票数 1
EN
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://wordpress.stackexchange.com/questions/396990

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档