TinyMCE multiple editors not rendering correctly in Yii2

问题

I'm using Yii2 and the widget from 2amigos/yii2-tinymce-widget.

The editor only looks correct when I'm using it just once, but when I'm using multiple editors the second, third, etc. editors are not rendering correctly. Do I have to stop the initialization of the TinyMCE after the first one?

Here is an example of the missed rendering:

And here is the code where I'm using the widget:

<?php

$form = ActiveForm::begin([
            'id' => $ansichtAktiv->id,
            'enableClientValidation' => true,
            'action' => 'index.php?r=empf/ansichtspeichern&geraet_token=' . $geraet->token . '&ansicht_id=' . $ansichtAktiv->id
        ]);
?>
<?=

$form->field($ansichtAktiv, 'html')->label('Ansicht:')->widget(TinyMce::className(), [
    'language' => 'de',
    'clientOptions' => [
        'plugins' => [
            "advlist autolink lists link charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste",
            "textcolor",
        ],
        'toolbar' => "forecolor backcolor | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    ]
]);
?>
<?=

$form->field($ansichtAktivSec, 'html')->label('Ansicht2:')->widget(TinyMce::className(), [
    'language' => 'de',
    'clientOptions' => [
        'plugins' => [
            "advlist autolink lists link charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste",
            "textcolor",
        ],
        'toolbar' => "forecolor backcolor | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    ]
]);
?>
<?= Html::submitButton('Speichern', ['class' => 'btn btn-danger', 'name' => 'speichern-button']) ?>
<?php ActiveForm::end(); ?>

回答1:

$(document).ready(function() {
    tinyMCE.init({
        mode: "textareas",
    });
});

Once the document is loaded, tinyMCE will initialize all TinyMCE plugins that have a type of textarea (default).

If you prefer writing inside view file, then add this at the bottom of it:

$this->registerJs('
    tinyMCE.init({
        mode: "textareas",
    });
', View::POS_END);

回答2:

You have two fields with the same name (html). By default Yii generates field ID based on field name. If you have two fields of the same model with the same name, they will have the same IDs. If TinyMce widget uses ID to initialize TinyMCE editor, only first element with this ID will be initialized.

You should use different names (for example html and html2) for these fields or specify ID manually:

$form->field($ansichtAktivSec, 'html', [
    'inputOptions' => ['id' => 'html-1'],
])

来源：https://stackoverflow.com/questions/50171188/tinymce-multiple-editors-not-rendering-correctly-in-yii2

标签

php

yii2

widget

tinymce