TinyMCE多个编辑器无法在Yii2中正确呈现

Question

我正在使用Yii2和来自2amigos/yii2-tinymce-widget的小部件。

编辑器只在我使用它时才看起来正确，但是当我使用多个编辑器时，第二，第三等编辑器无法正确渲染。我必须在第一个之后停止TinyMCE的初始化吗？

以下是错过渲染的示例：

以下是我正在使用小部件的代码：

<?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(); ?>

Answer 1

注册一个新的JavaScript文件并添加这部分代码：

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

加载文档后，tinyMCE将初始化所有类型为textarea（默认）的TinyMCE插件。

如果您更喜欢在视图文件中编写，请在其底部添加：

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

Answer 2

您有两个名称相同的字段（html）。默认情况下，Yii根据字段名称生成字段ID。如果您有两个具有相同名称的相同型号的字段，则它们将具有相同的ID。如果TinyMce窗口小部件使用ID初始化TinyMCE编辑器，则只会初始化具有此ID的第一个元素。

您应该为这些字段使用不同的名称（例如html和html2）或手动指定ID：

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