Problem with multi editor in Wordpress

Asked

Viewed 401 times

4

I’m using several editors in one custom post type, however the plugin qTranslate adds to language tabs only in the default Wordpress editor and others not and along with that gives a bug in the tab that does not make it possible to switch between text and visual.

imagem

How to solve this?

  • If you think it’s a plugin bug, it might be more interesting to report to the developers themselves.

  • I’ve contacted the developers already, but no answer... In case I’m asking right here why will someone already had this problem and found some alternative solution.

  • @Danielkoleski Se this custom post type is specific to a theme or plugin, I don’t think there will be support automatic on behalf of the qTranslate. Maybe there is a way the theme or plugin use the features of qTranslate, but do not know the plugin API to affirm with absolute certainty.

  • So, I’m developing the theme but I could not solve so far, the solution I found was using multi-site in wordpress.

2 answers

2

It is difficult; if not impossible...

I went to school 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 never saw anything on Wordpress Development.

I already opened the plugin files and tried to follow the logic behind this functionality; just to end up running in a panic: is quite complicated to follow. The plugin is very old (2008) and although it is maintained until today, 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.

Anyway, my suggestion is to use a wp_editor for each language and build a display with jQuery-UI in tabs, each tab containing an editor.

inserir a descrição da imagem aqui

Instead of using a Meta Box, one of these action Hooks to print without boxing. Administrative Style reference is plugin Wordpress Admin Style. Instead of printing the styles, it is best to do the while of the complete 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
}

0

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

Take a look inside the plugin files that you will surely be able to enable it for custom-post-types( normally the name of the custom post type you defined).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.