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
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
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' => [
]
]
);
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>
alright thx for all your help. 
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