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'],
])

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

TinyMCE multiple editors not rendering correctly in Yii2

php

tinymce

widget

yii2