WordPress编辑器:检测活动选项卡(视觉或文本)

时间:2014-06-10 18:33:01

标签: jquery wordpress

当我在WordPress编辑器(如WordPress 3.9中的TinyMCE 4)和普通文本区域设置和获取内容时,我遇到了这种情况。我这样做是因为我的页面中有太多的富文本编辑器,我无法在每个textarea上放置wp_editor。所以我提出了只打印一个wp_editor并在这个和其他textareas之间动态设置和获取内容的方法。

到目前为止,我已经编写了以下代码片段:

var Plugin = {
    editorOpen : function(settings_box, container, origin) {
        //Check wp_editor
        var wp_editor_textarea = $(settings_box).find( 'textarea.wp_editor' ).eq(0);
        if( wp_editor_textarea.length ) {
            // The wrapping div of the wp_editor
            // This is just how I am printing stuff
            var wp_editor_container = container.find('.ipt_uif_builder_wp_editor');

            // To get the RAW tinyMCE editor
            // We are simply searching for the first textarea inside the wrapper
            // This works
            var tmce_textarea = wp_editor_container.find('textarea').eq(0);

            // Init the tinyMCE API
            var editor = tinyMCE.get( tmce_textarea.attr('id') );

            // Get the original content
            var content = wp_editor_textarea.val();

            // Show it
            wp_editor_container.css({position : 'static', 'left' : 'auto'});

            // Set the content
            // The problem with this is
            // Even if the user has clicked TEXT tab, editor will still be a tinyMCE instance
            // So this method can not be used to set the values
            // Since we can not know like this if the user is on visual tab or text tab
            // And the following snippet will always set the value on visual tab
            if ( editor && editor instanceof tinymce.Editor ) {
                editor.setContent( switchEditors.wpautop( content ) );
                editor.save({ no_events: true });
                console.log( 'Setter in TinyMCE: ' + switchEditors.wpautop( content ) );
            } else {
                tmce_textarea.val( switchEditors.pre_wpautop(content) );
                console.log('Setter in TextArea: ' + switchEditors.pre_wpautop(content));
            }

            // But I have figured out an ugly hack to do it anyway
            if ( tmce_textarea.is(':visible') ) {
                // TEXT TAB active
            } else {
                // VISUAL TAB active
            }
        }
    },

    editorClose : function(settings_box, container) {
        //Check wp_editor
        var wp_editor_textarea = $(settings_box).find('textarea.wp_editor').eq(0);
        if(wp_editor_textarea.length) {
            // Get the tmce textarea
            var tmce_textareaID = container.find('.ipt_uif_builder_wp_editor textarea').eq(0).attr('id');
            var wp_editor_container = container.find('.ipt_uif_builder_wp_editor');
            var tmce_textarea = wp_editor_container.find('textarea').eq(0);
            var content;
            var editor = tinyMCE.get(tmce_textareaID);

            // Get the content
            // Here again we may get the wrong content
            // Since the content is always fetched from tinyMCE editor
            // even if the TEXT tab is active
            if( editor && editor instanceof tinymce.Editor ) {
                content = switchEditors.pre_wpautop( editor.getContent() );
                console.log('Getter in TinyMCE: ' + content);
            } else {
                content = $( '#' + tmce_textareaID ).val();
                console.log( 'Getter in TextArea: ' + content );
            }

            // But I have figured out an ugly hack to do it anyway
            if ( tmce_textarea.is(':visible') ) {
                // TEXT TAB active
            } else {
                // VISUAL TAB active
            }

            //Update it
            wp_editor_textarea.val(content);

            //Hide the wp_editor
            container.find('.ipt_uif_builder_wp_editor').css({position : 'absolute', 'left' : -9999});
        }
    }
};

正如您所看到的,我并不完全了解哪个标签(TEXT或VISUAL)通过某些API处于活动状态。我想到这一点的唯一方法是标记为ugly hack

非常欢迎任何想法和帮助。感谢您抽出宝贵时间阅读本文:)

编辑:为了简单起见,我要问的是#34;对于WordPress编辑器中给定的tinyMCE实例,我们如何知道哪个选项卡(视觉或文本)是活动的?"

0 个答案:

没有答案