我正在开发一个小型Wordpress插件,它使用JavaScript将带有css类的html标记添加到Wordpress编辑器中的可视文本视图中。我用的是经典编辑。
根据Chrome工具,可视化文本编辑器包括几个div元素,然后是一个带有id "content_ifr“的iframe元素,该元素加载第二个body元素,该元素随后包含与post相关的所有html标记:
<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>我已经知道,我可以访问第二个身体元素
document.getElementById("content_ifr").contentDocument.body但是这只适用于控制台中的手动输入,在加载完所有内容之后。它不能在插件的JavaScript文件中工作,插件的php文件是通过wp_enqueue_scripts加载的。对应的变量总是返回null。
如何使我的插件的JavaScript文件可以访问经典编辑器的内容?
发布于 2021-10-21 11:41:25
要在经典编辑器中将编辑器内容作为字符串获取,请使用以下命令:
content = tinymce.activeEditor.getContent();取自https://stackoverflow.com/a/5843951/57482
注意,如果要修改内容,则应该使用所提供的API,而不是直接修改DOM。如果不这样做,就不会更新javascript中的插件本地状态,从而导致问题。修改DOM应该是最后的手段。
还请注意,这将不适用于块编辑器。块编辑器需要一种完全不同的方法,您不能然后编辑内容并将其放回原处而不破坏块或将所有内容转换为一个自定义HTML块,从而导致其他问题。
https://wordpress.stackexchange.com/questions/396990
复制相似问题