Yii Framework Forum: change lajax translation interface - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

change lajax translation interface

#1 User is offline   bvdv 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 21-June 16

Posted 15 May 2017 - 01:47 AM

Hello
i want to change the interface of the lajax translation page.
i want to change this regular inputbox by a tinymc html editor box.
what is the "right way" to do this?
links or tutorials related are highly apreciated .

thx in advance Bert

Attached File(s)


0

#2 User is offline   bvdv 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 21-June 16

Posted 15 May 2017 - 01:58 PM

ok i found a big part of the solution
i will post the full solution when it works.

but i now have another how can i give a id to my tinymce widget
thx Bert

TinyMce::widget(
                            [
                                'name' => 'LanguageTranslate[' . $data->id . ']',
                                'value' => $data->translation,
                                'id'=>'myid', //----> like this but it doesnt work
                                'options' => [
                                    'class' => 'form-control translation',
                                    
                                    'tabindex' =>  $data->id,
                                    'mytest' => $data->id,
                                ],
                                'clientOptions' => [
                                    
                                    
                                    ]
                            ]
            );

0

#3 User is offline   bvdv 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 21-June 16

Posted 15 May 2017 - 02:05 PM

generated code
<div id="mceu_40" class="mce-tinymce mce-container mce-panel" role="application" tabindex="-1" hidefocus="1" style="visibility: hidden; border-width: 1px; width: 100%;">
<div id="mceu_40-body" class="mce-container-body mce-stack-layout">
<div id="mceu_41" class="mce-container mce-menubar mce-toolbar mce-stack-layout-item mce-first" role="menubar" style="border-width: 0px 0px 1px;">
<div id="mceu_46" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item" role="group" tabindex="-1" hidefocus="1">
<div id="mceu_54" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" role="group" tabindex="-1" hidefocus="1" style="border-width: 1px 0px 0px;">
<iframe id="w2_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;" src="javascript:""">
<!DOCTYPE html>
<html>
<head>
<body id="tinymce" class="mce-content-body " contenteditable="true" data-id="w2" spellcheck="false">
<p>
/*---> this is the mce containing the NEW text */ lumen5 tite 125 bert kkkk 1456
<br>
</p>
</body>
</html>
</iframe>
</div>
<div id="mceu_55" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" role="group" tabindex="-1" hidefocus="1" style="border-width: 1px 0px 0px;">
</div>
<div class="mce-branding-powered-by" style="right: 0px; bottom: 39px;"></div>
</div>
/*---> this is the mce containing the OLD text */ <textarea id="w2" class="form-control translation" mytest="402" tabindex="402" data-id="402" name="LanguageTranslate[402]" style="display: none;" aria-hidden="true">lumen5 tite 125 bert kkkk</textarea>
</td>


0

#4 User is offline   bvdv 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 21-June 16

Posted 17 May 2017 - 04:43 PM

alright thx for all your help. :rolleyes:

here is the solution

first change your config file
    'components' => [
        ...............
        'view' => [
            'theme' => [
                'pathMap' => [
                    '@lajax/translatemanager/views' => '@app/views/translate'
                ],
            ],
        ], 
      .................


create a folder translate in your views folder
create a file in the translate folder translate.php(be sure the name is correct otherwise it wont work)

i use the tinymce widget but you can use any. The code will change a bit but the principle is the same.
install your favorite html editor widget( composer require ..............)

translate.php code

<?php

use yii\helpers\Html;
use yii\widgets\Pjax;
use kartik\grid\GridView;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use lajax\translatemanager\helpers\Language;
use lajax\translatemanager\models\Language as Lang;
use modernkernel\tinymce\TinyMce;

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

$this->title = Yii::t('language', 'Translation into {language_id}', ['language_id' => $language_id]);
$this->params['breadcrumbs'][] = ['label' => Yii::t('language', 'Languages'), 'url' => ['list']];
$this->params['breadcrumbs'][] = $this->title;
?>
<?php $this->registerJsFile('js/mytranslate.js', ['depends' => [yii\web\JqueryAsset::className()]]); ?> 


<?= Html::hiddenInput('language_id', $language_id, ['id' => 'language_id', 'data-url' => Yii::$app->urlManager->createAbsoluteUrl('/translatemanager/language/save')]); ?>
<?php

$gridColumns = [
    [
        'format' => 'raw',
        'attribute' => 'message',
        'headerOptions' => ['style' => 'width:20%'],
        'filterInputOptions' => ['class' => 'form-control', 'id' => 'message'],
        'label' => Yii::t('language', 'Source'),
        'content' => function ($data) {
            return Html::textarea('LanguageSource[' . $data->id . ']', $data->source, ['class' => 'form-control source', 'readonly' => 'readonly']);
        },
    ],
    [
        'format' => 'raw',
        'attribute' => 'translation',
        'filterInputOptions' => [
            'class' => 'form-control',
            'id' => 'translation',
            'placeholder' => $searchEmptyCommand ? Yii::t('language', 'Enter "{command}" to search for empty translations.', ['command' => $searchEmptyCommand]) : '',
        ],
        'label' => Yii::t('language', 'Translation'),
        'content' => function ($data) {
            return
                    TinyMce::widget(
                            [
                                'name' => 'LanguageTranslate[' . $data->id . ']',
                                'value' => $data->translation,
                                'options' => [
                                    'class' => 'form-control translation',
                                    'tabindex' => $data->id,
                                    'data-id' => $data->id,
                                ],
                                'clientOptions' => [
                                ]
                            ]
            );
        },
    ],
                [
                'format' => 'raw',
                'label' => Yii::t('language', 'Action'),
                    'headerOptions' => ['style' => 'width:100px'],
                'content' => function ($data) {
                    return Html::button(Yii::t('language', 'Save'), ['type' => 'button', 'class' => 'btn btn-lg btn-success btnsvtranslates']);
                },
            ],
];

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,]);
?>


create a javascript file mytranslate.js in the directory web/js

add following code

$(document).ready(function () {
    $("[id*='_ifr']").attr('title', '');

    $('.btnsvtranslates').on('click', function () {
        $("[id*='_ifr']").attr('title', '');
        var $translation = $(this).closest('tr').find('.translation');
        tmpstrhtml= $.trim($(this).closest('tr').find('iframe').contents().find('.mce-content-body').html());
        
        tmpstrhtml=tmpstrhtml.replace("<br data-mce-bogus=\"1\">", "");
       
        var data = {
            id: $translation.data('id'),
            language_id: $('#language_id').val(),
            translation: tmpstrhtml
        };

        helpers.post($('#language_id').data('url'), data);
    });

});



this should work, i hope it will help someone else
Greetings Bert
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users