我正在寻找一种方法来增强功能的TinyMCE编辑器在WordPress中添加我自己的自定义脚本(css & JS),以改善它。拜托,有没有一个钩子可以让这一切发生?谢谢.
xe55xuns1#
老问题,但因为它是在谷歌搜索结果的顶部没有答案,我会在这里芯片。在WordPress的现代版本中,TinyMCE的iframe不是作为外部资源(文件)加载的,而是动态生成的,其内容由JS注入。因此,您也可以从管理页面的顶部窗口直接访问其上下文和内容。比如说,你想在主内容编辑器中操作经典编辑器的TinyMCE,即动态地改变它的颜色。你可以在管理面板中排队的任何脚本中写这样的东西:
document.getElementById('content_ifr').contentWindow.document.body.style.backgroundColor = 'red';
字符串假设iframe的ID是#content_ifr。在jQuery中:
#content_ifr
$($('#content_ifr').get(0).contentWindow.document.body).attr('style', 'background-color:red');
型如果出于任何原因,您仍然需要将JS添加到iframe的head部分,您可以在admin中排队的主JS文件中这样做:
let $script = document.createElement('script'); $script.innerHTML = 'console.log("Hello from TinyMCE iframe")'; document.getElementById('content_ifr').contentWindow.document.head.appendChild($script);
型或者,如果您需要将外部文件入队:
let $script = document.createElement('script'); $script.src = 'path/to/your-tinymce-custom-script.js'; $script.type = "text/javascript"; document.getElementById('content_ifr').contentWindow.document.head.appendChild($script);
型请注意,附加到iframe文档的脚本将立即执行。也就是说,在上面的例子中,console.log将立即将"Hello from TinyMCE iframe"打印到web dev控制台。要将主脚本添加到管理部分,您可以使用admin_enqueue_scripts操作进行操作。
"Hello from TinyMCE iframe"
add_action( 'admin_enqueue_scripts', function() { wp_enqueue_script( 'my-custom-admin-script', 'path/to/your-custom-admin-script.js', [], 1, true ); } );
型
yrdbyhpb2#
TinyMCE -https://codex.wordpress.org/TinyMCE的详细帮助我认为你应该使用法典。
2条答案
按热度按时间xe55xuns1#
老问题,但因为它是在谷歌搜索结果的顶部没有答案,我会在这里芯片。
在WordPress的现代版本中,TinyMCE的iframe不是作为外部资源(文件)加载的,而是动态生成的,其内容由JS注入。
因此,您也可以从管理页面的顶部窗口直接访问其上下文和内容。
比如说,你想在主内容编辑器中操作经典编辑器的TinyMCE,即动态地改变它的颜色。你可以在管理面板中排队的任何脚本中写这样的东西:
字符串
假设iframe的ID是
#content_ifr
。在jQuery中:
型
如果出于任何原因,您仍然需要将JS添加到iframe的head部分,您可以在admin中排队的主JS文件中这样做:
型
或者,如果您需要将外部文件入队:
型
请注意,附加到iframe文档的脚本将立即执行。也就是说,在上面的例子中,console.log将立即将
"Hello from TinyMCE iframe"
打印到web dev控制台。要将主脚本添加到管理部分,您可以使用admin_enqueue_scripts操作进行操作。
型
yrdbyhpb2#
TinyMCE -https://codex.wordpress.org/TinyMCE的详细帮助我认为你应该使用法典。