如何在WordPress中添加自定义CSS和JavaScript到tinymce,

mkh04yzy  于 5个月前  发布在  WordPress
关注(0)|答案(2)|浏览(83)

我正在寻找一种方法来增强功能的TinyMCE编辑器在WordPress中添加我自己的自定义脚本(css & JS),以改善它。
拜托,有没有一个钩子可以让这一切发生?
谢谢.

xe55xuns

xe55xuns1#

老问题,但因为它是在谷歌搜索结果的顶部没有答案,我会在这里芯片。
在WordPress的现代版本中,TinyMCE的iframe不是作为外部资源(文件)加载的,而是动态生成的,其内容由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部分,您可以在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操作进行操作。

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

yrdbyhpb

yrdbyhpb2#

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

相关问题