如何在wordpress中向tinymce添加自定义Css和Javascript。

Question

我正在寻找一种方法来增强 WordPress 中 TinyMCE 编辑器的功能，通过添加我自己的自定义脚本（css 和 JS）来改进它。

请问，是否有一个可以调用的钩子可以实现这一点？

谢谢。

Answer 1

老问题，但由于它位于谷歌搜索结果之上，没有答案，所以我要在这里补充一下。

在现代版本的 Wordpress TinyMCE 中，iframe 不会作为外部资源（文件）加载，而是动态生成，其内容由 JS 注入。

因此，您还可以从管理页面的顶部窗口直接在 JS 中访问其上下文和内容。

假设您想在主内容编辑器中操作经典编辑器的 TinyMCE，即动态更改其颜色。您可以在管理面板中排队的任何脚本中编写如下内容：

document.getElementById('content_ifr').contentWindow.document.body.style.backgroundColor = 'red';

假设 iframe 的 id 是

#content_ifr

。

或者在 jQuery 中：

$($('#content_ifr').get(0).contentWindow.document.body).attr('style', 'background-color:red');

如果出于某种原因你仍然需要将 JS 添加到 iframe 的 head 部分，你可以在管理中排队的主 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 文档的脚本将立即执行。 IE。在上面的示例中，console.log 将立即将

"Hello from TinyMCE iframe"

打印到 Web 开发控制台。

要将主脚本添加到管理部分，您可以使用 admin_enqueue_scripts 操作按照通常的方式进行操作，即

add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_script(
        'my-custom-admin-script',
        'path/to/your-custom-admin-script.js',
        [],
        1,
        true
    );  
} );

Answer 2

TinyMCE 的详细帮助 - https://codex.wordpress.org/TinyMCE 我认为你应该使用法典。