当你有方法编辑器时,TinyMCE更新工具栏(在init之后)

问题描述 投票:0回答:1

我正在为WordPress制作一个Google Fonts插件,我尝试与核心WYSIWYG编辑器具有相同的效果。基本上当你点击元素(在编辑器内)和字体类时,我想获得类,然后根据它重新加载工具栏中的字体系列/样式列表框。

(我在这里发现了几个hacks就像这个Proper Way Of Modifying Toolbar After Init in TinyMCE但没有像WP核心的例子那样工作)

点击P,H1,H3,H3时有相同的功能......他们是怎么做到的?你能否至少指出我在WordPress发行版中的JS文件;如果看到代码,我想我可以搞清楚。

这是GIF,它展示了我在说什么。提前致谢。

enter image description here

javascript wordpress tinymce
1个回答
1
投票

我找到了解决方案,因为它不是黑客,就像我在SO上发现的那些,我会在这里发布它并希望它能帮助那些尝试做类似事情的其他人。

首先访问按钮/列表框需要使用具有回调函数的onpostrender。

editor.addButton( 'developry_google_font_family_button', {
   type  : 'listbox',
   onpostrender : fontFamilyNodeChange,
   value : '',
...

接下来,回调函数应如下所示:

function fontFamilyNodeChange() {
    var listbox = this;
    editor.on('NodeChange', function( e ) {
        // This next part is specific for my needs but I will post it as an example.
        var selected = [];
        if ( $( e.element ).hasClass( 'mce-ga' ) )  { // this a class I add to all elements that have google fonts format
            // Then I strip the classes from classList that I don't need and add the rest into an array (e.g ['roboto', '100'])
            var gfont_options = $( e.element ).attr('class')
                .replace('mce-ga', '')
                    .replace('mce-family-', '')
                        .replace('mce-weight-', '')
                            .trim()
                                .split(' ');
            selected.push( gfont_options );
            // At end I add the new value to listbox select[0][0] (e.g. 'roboto')
            listbox.value(selected[0][0]);
        }
    });
}

这是一个例子:

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.