Yii2 2 amigos/yii2-tinymce-widget模态

时间：2018-04-30 17:30:04

标签： yii2 tinymce

我正在尝试将2 amigos/yii2-tinymce-widget实现为模态弹出窗口。它在第一次打开时工作，但接下来调用TinyMCE不会显示。

我发现了一些关于这个主题的帖子

https://github.com/2amigos/yii2-tinymce-widget/issues/24 https://github.com/twbs/bootstrap/issues/549

但我似乎无法让它发挥作用。

任何人都可以帮我解决这个问题。

在我的索引视图中是

<?php

use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\bootstrap\Modal; //used to make create a popup window
/* @var $this yii\web\View */
/* @var $searchModel backend\models\TicketsSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Tickets');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="tickets-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?php // = Html::a(Yii::t('app', 'Create Tickets'), ['create'], ['class' => 'btn btn-success']) ?>
        <?= Html::button('<i class="glyphicon glyphicon-plus"></i> '.Yii::t('app', 'New Ticket'), 
            [
                'id'=>'modalCreateButton',
                'class' => 'btn btn-success modalButton',
                'value'=>Url::to('index.php?r=tickets/create'), 
                'title'=>Yii::t('app', 'New Ticket'), 
            ]) 
        ?>
    </p>
<?php Pjax::begin(['id'=>'ticketsListGrid']); ?>
    <?= GridView::widget([
        'id' => 'grid',
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'TicketId',
            'ProjectId',
            'TicketDate',
            'Description',
            'TicketStatusId',
            'TicketSeverityId',
            'UserId',
            //'dtCreated',
            //'dtModified',

            // ['class' => 'yii\grid\ActionColumn'],
            [   
                'class' => 'yii\grid\ActionColumn',
                'template' => '{update} {delete}',
                'buttons'=>[
                    'update' => function($url,$model,$key){
                        $btn =  Html::a(
                                    '<span class="glyphicon glyphicon-pencil"></span>',
                                    Url::to('index.php?r=tickets/update').'&id='.$key,
                                    [
                                        'id' => 'modalUpdateButton',
                                        'class' => 'grid-action modalButton', 
                                        'value'=>Url::to('index.php?r=tickets/update').'&id='.$key, 
                                        'title'=>Yii::t('app', 'Updating Ticket: ').$model->TicketId,
                                    ]
                                );
                        return $btn;
                    }
                ]
            ],
        ],
    ]); ?>
    <?php Pjax::end(); ?>
</div>
<?php
    //Modal Popup
    Modal::begin([
        'id'=>'modal',
        'class'=>'modal',
        'size'=>'modal-lg', //modal-sm or modal-lg
        'headerOptions' => ['id' => 'modalHeader'],
        'header' => '<span id="modalHeaderTitle"></span>',
        'closeButton' => [
            'label'=>'Close',
            'id'=>'close-button',
            'class'=>'btn btn-warning pull-right modalClose',
        ],
        'clientOptions' => [
            'backdrop' => 'static', // true,
            'keyboard' => false, // true,
        ]
    ]);
    echo '<div id="message"></div>';
    echo "<div id='modalContent'></div>";
    Modal::end();
?>
<?php 
    $this->registerJs('$("#modal").on("shown.bs.modal",function(){
        alert("");
        tinymce.init({
            "branding":false,
            "plugins":["advlist autolink lists link charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste","textcolor"],
            "toolbar":"undo redo | styleselect forecolor backcolor | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            "selector":"#tickets-details"
        });
    });', yii\web\View::POS_READY);
?>

我使用以下JS作为我的模态

$(document).on('ready pjax:success', function() {
    $('.modalButton').click(function () {
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
        document.getElementById('modalHeaderTitle').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        return false; //Stop default link reloading of page
    });
});
$('.modalButton').click(function () {
    $('#modal').modal('show')
        .find('#modalContent')
        .load($(this).attr('value'));
    document.getElementById('modalHeaderTitle').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';

    return false; //Stop default link reloading of page
});

然后我的_form为模态

<?php

use yii\helpers\Html;
use yii\helpers\ArrayHelper;
// use yii\widgets\ActiveForm;
use yii\bootstrap\ActiveForm; //used to enable bootstrap layout options.
use yii\widgets\Pjax;

use yii\helpers\Url; //used to make create a popup window
use yii\bootstrap\Modal; //used to make create a popup window

use kartik\widgets\DatePicker;
use dosamigos\tinymce\TinyMce;

/* @var $this yii\web\View */
/* @var $model backend\models\Tickets */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="tickets-form">

    <?php 
        $form = ActiveForm::begin([
        'id'=>$model->formName(),
        'layout' => 'horizontal', //'default', 'horizontal' or 'inline'
        'class' => 'form-horizontal',
        'fieldConfig' => [
            'enableError' => true,
            'options'=>['class'=>'']
        ]
    ]); 
    ?>

<div class="row">
    <?php
        echo $form->field(
            $model, 
            'UserId',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-3">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<div class="row">
    <?php
        echo $form->field(
            $model, 
            'ProjectId',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-7">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<div class="row">
    <?php
        echo $form->field(
            $model, 
            'TicketDate',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<div class="row">
    <?php
        echo $form->field(
            $model, 
            'Description',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<div class="row">
    <?php
        // echo $form->field(
        //     $model, 
        //     'Details',
        //     [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
        // )->textArea(['rows' => 12])->label ( null , [ 'class' => 'control-label' ] );
        echo $form->field(
                $model, 
                'Details',
                [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
            )->widget(TinyMce::className(), [
                'options' => ['rows' => 12],
                'language' => 'en',
                'clientOptions' => [
                    'plugins' => [
                        "advlist autolink lists link charmap print preview anchor",
                        "searchreplace visualblocks code fullscreen",
                        "insertdatetime media table contextmenu paste",
                        "textcolor"
                    ],
                    'toolbar' => "undo redo | styleselect forecolor backcolor | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
                ]
            ]);
?>
</div>
<div class="row">
    <?php
        echo $form->field(
            $model, 
            'TicketStatusId',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<div class="row">
    <?php
        echo $form->field(
            $model, 
            'TicketSeverityId',
            [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
        )->textInput(['maxlength' => true])->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>

<!--     <?= $form->field($model, 'UserId')->textInput() ?>

    <?= $form->field($model, 'ProjectId')->textInput() ?>

    <?= $form->field($model, 'TicketDate')->textInput() ?>

    <?= $form->field($model, 'Description')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'TicketStatusId')->textInput() ?>

    <?= $form->field($model, 'TicketSeverityId')->textInput() ?>

    <?= $form->field($model, 'dtCreated')->textInput() ?>

    <?= $form->field($model, 'dtModified')->textInput() ?> -->

    <div class="row form-group">
        <?php // = Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']) ?>
        <?php
//Form button(s)
    echo Html::submitButton($model->isNewRecord ? "<span class='glyphicon glyphicon-floppy-disk' aria-hidden='true'></span> ".Yii::t('app', 'Create') : "<span class='glyphicon glyphicon-floppy-disk' aria-hidden='true'></span> ".Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-block btn-success form-cmd' : 'btn btn-block btn-primary form-cmd'])
?>
    </div>
    <?php ActiveForm::end(); ?>
</div>
    <!-- Modal -->
    <?php
        Modal::begin([
            'id'=>'modalPopup',
            'class'=>'modalPopup',
            'size'=>'modal-lg',
            'headerOptions' => ['id' => 'modalPopupHeader'],
            'header' => '<span id="modalHeaderTitle"></span>',
            'closeButton' => [
                'label'=>'Close',
                'id'=>'closeButton',
                'class'=>'btn btn-warning pull-right',
            ],
            'clientOptions' => [
                'backdrop' => 'static', //true,
                'keyboard' => false, // true,
            ]
        ]);
        echo '<div id="message"></div>';
        echo "<div id='modalContent'></div>";
        Modal::end();
    ?>
</div>
<?php 
$script = <<< JS
    $('form#{$model->formName()}').on('beforeSubmit', function(e){
        var \$form = $(this);
        $.post(
            \$form.attr("action"), //serialize Yii2 form 
            \$form.serialize()
        )

        .done(function(result){
            //console.log(result);
            result = JSON.parse(result);
            //alert(result + " " + result.message + " " + result.status);
            if(result.status == 'Success'){
                $(\$form).trigger("reset");
                $.pjax.reload({container:'#grid'}); //requery the main form's grid with the new addition
                $(document).find('#modal').modal('hide');
                $("#message").html(result.message);
            }else{
                $(\$form).trigger("reset");
                $("#message").html(result.message);
            }
        })

        .fail(function(){
            console.log("server error");
        });

        return false;
    });

    $(function(){
        $('.showModal').click(function (){
            // $('#modalCreate').modal('hide');
            $('#modalPopup').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
                // document.getElementById('modalHeader').innerHTML = '<button type="button" id="close-button" class="btn btn-warning pull-right" data-dismiss="modalPopup" data-target="modalCreate" data-toggle="modalCreate" aria-hidden="true">Close</button><h4>' + $(this).attr('title') + '</h4>';
                // document.getElementById('modalHeader').innerHTML = '<button type="button" id="close-button" class="btn btn-warning pull-right" aria-hidden="true">Close</button><h4>' + $(this).attr('title') + '</h4>';
        });


    });
JS;
$this->registerJS($script);
?>

1 个答案:

答案 0 :(得分：0)

每次关闭模态时，都需要使用remove() API来摆脱TinyMCE。如果你不这样做，那么TinyMCE仍然认为它与旧模态（被破坏）相关联，因此它不会再次使用新模态进行初始化。

相关问题
最新问题