Problem with multi editor in Wordpress

4

I'm using multiple editors in a custom post type , but the qTranslate plugin adds the language tabs only in the default Wordpress editor and in the others it does not and along with it a bug in the tab that does not allow switching between text and visual.

How to solve this?

    
asked by anonymous 05.02.2014 / 14:15

2 answers

2

It is difficult; if not impossible ...

I attended the old qTranslate forum that Qian Qin (the author) had on the plugin site and never appeared solution. Now in 2014 I'm not sure, but before that I've never seen anything in WordPress Development .

I have already opened the plugin files and tried to follow the logic behind this functionality; just to finish fleeing in panic: is very complicated to follow. The plugin is very old (2008) and despite being maintained to this day, I think it has never gone through a refactoring to use more modern techniques. It is totally procedural and only has 14 hooks, between actions and filters .

containing an editor.

InsteadofusingaMetaBox, one of these action hooks to print without boxing. The Administrative Style reference is from the WordPress Admin Style plugin. Instead of printing the styles, it is best to do the enqueue of the full CSS.

foreach( array( 'post', 'post-new' ) as $hook )
    add_action( "admin_print_scripts-$hook.php", 'enqueue_sopt_10564' );

function enqueue_sopt_10564()
{
    // Run only for the types Posts and Movies
    global $typenow;
    if( !in_array( $typenow, array( 'post', 'movie' ) ) )
        return;

    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-tabs' );
}

add_action( 'edit_form_after_editor', 'imprimir_sopt_10564' );

function imprimir_sopt_10564( $post ) 
{
    if( !in_array( $post->post_type, array( 'post', 'movie' ) ) )
        return;

    /* IMPRIMINDO JS e CSS diretamente aqui, melhor fazer Enqueue */
    ?>
    <h3>Outro texto à traduzir</h2>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Português</a></li>
            <li><a href="#tabs-2">English</a></li>
            <li><a href="#tabs-3">Español</a></li>
        </ul>
        <div id="tabs-1"><?php echo wp_editor( 'Em pt_BR', 'ed_pt_br', array( 'textarea_name' => 'ed_pt_br', 'textarea_rows' => 10 ) ); ?></div>
        <div id="tabs-2"><?php echo wp_editor( 'In en_US', 'ed_en_us', array( 'textarea_name' => 'ed_en_us', 'textarea_rows' => 10 ) ); ?></div>
        <div id="tabs-3"><?php echo wp_editor( 'En es_ES', 'ed_es_es', array( 'textarea_name' => 'ed_es_es', 'textarea_rows' => 10 ) ); ?></div>
    </div>
    <br class="clear" />
    <script type="text/javascript">
        jQuery(document).ready(function($) 
        {    
            $('#tabs').tabs();
        });
    </script>
    <style type='text/css'>
        /* Component containers
        ----------------------------------*/
        .ui-widget { font-family: sans-serif; font-size: 12px; }
        .ui-widget .ui-widget { font-size: 1em; }
        .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: sans-serif; font-size: 1em; }
        .ui-widget-content { border: 1px solid #dfdfdf; background: #ffffff; color: #333333; }
        .ui-widget-header { border: 1px solid #dfdfdf; color: #333333; font-weight: bold; background-color: #f1f1f1; background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); background-image: -o-linear-gradient(top, #f9f9f9, #ececec); background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); background-image: linear-gradient(top, #f9f9f9, #ececec); }
        .ui-widget-header a { color: #333333; }

        /* Interaction states
        ----------------------------------*/
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dfdfdf; background-color: #f1f1f1; background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); background-image: -o-linear-gradient(top, #f9f9f9, #ececec); background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); background-image: linear-gradient(top, #f9f9f9, #ececec); font-weight: normal; color: #333333; }
        .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #333333; text-decoration: none; }
        .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #ccc; background-color: #ececec; background-image: -ms-linear-gradient(top, #ececec, #f9f9f9); background-image: -moz-linear-gradient(top, #ececec, #f9f9f9); background-image: -o-linear-gradient(top, #ececec, #f9f9f9); background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #ececec, #f9f9f9); background-image: linear-gradient(top, #ececec, #f9f9f9);  font-weight: normal; color: #000000; }
        .ui-state-hover a, .ui-state-hover a:hover { color: #000000; text-decoration: none; }
        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dfdfdf; background: #ffffff; font-weight: normal; color: #333333; }
        .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #333333; text-decoration: none; }
        .ui-widget :active { outline: none; }

        /* Interaction Cues
        ----------------------------------*/
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #e6db55; background: #ffffe0; color: #333333; }
        .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #333333; }
        .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cc0000; background: #ffebe8; color: #cc0000; }
        .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cc0000; }
        .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cc0000; }
        .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
        .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
        .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }


        .ui-widget-content .ui-icon {background-image: url(../images/ui-icons_333333_256x240.png); }

        .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; }
        .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; }
        .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; }
        .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }

        .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
        .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
        .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
        .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
        .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
        .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
        .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
        .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
        .ui-tabs .ui-tabs-hide { display: none !important; }
    </style>
    <?php
}
    
26.03.2014 / 02:38
0

Probably the plugin filters the type of post that will act. Somewhere for example, "post type == post" only. If it is active for pages also "post type == pages" you should see the tabs in them as well.

Take a deep breath inside the plugin's files that you'll certainly be able to enable for custom-post-types (usually the custom post type name you defined).

    
24.02.2014 / 15:25