使用数据表以模式显示Summernote-Ruby on Rails

Question

我正在使用数据表，并在引导模态中创建和编辑，但我需要在模态中显示summernote

index.html.erb：

<table style="width: 100%" dt-columns="dtColumnsWelcomes" dt-options="welcomesOptions" dt-instance="welcomesInstance" datatable="" class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>name</th>
          <th>description</th>
          <th>Operations</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>

<%= render 'client/welcomes/edit' %>

_edit.html.erb：

在这里，我以模态形式呈现表单

<div class="modal fade in" id="editWelcome" modal="editWelcome" close="cancelEdit()">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form class="form-horizontal" name="formEditWelcome" novalidate>
        <input type="hidden" name="authenticity_token" ng-init="authenticity_token='<%= form_authenticity_token %>'">
        <div class="modal-header">
          <h4 class="modal-title">Editar datos de la bienvenida</h4>
        </div>
        <%= render 'client/welcomes/form' %>
        <div class="modal-footer">
          <button class="btn btn-warning" type="button" ng-click="cancelEdit()">Cancelar</button>
          <button class="btn btn-primary" type="button" ng-click="updateWelcome()">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>

_form.html.erb：

这是我感兴趣的部分

<div class="row">
  <div class="col-md-12">
    <label class="col-md-4 control-label">Descripción:</label>
    <input type="text " id="welcome_description">
  </div>
</div>

welcome_data_table.erb：

我将数据传递到表中

def data
    welcomes.map do |welcome|
      {
          'name' => welcome.name,
          'description' => welcome.description,
          'id' => welcome.id
      }
    end
  end

WelcomeController.js：

在这里，我将必要的数据传递到索引中的表中，以便显示模态

$scope.dtColumnsWelcomes = [
        DTColumnBuilder.newColumn('name').withTitle('Nombre'),
        DTColumnBuilder.newColumn('description').withTitle('Descripción'),
        DTColumnBuilder.newColumn('id').withTitle('Operaciones').notSortable().renderWith(function (data) {
            return '<a href="javascript:void(0)" ng-click="openEditWelcome(' + data + ')"><i class="fa fa-edit"></i></a> ' +
                '<a href="javascript:void(0)" ng-click="delete(' + data + ')"><i class="fa fa-trash"></i></a> ' +
                '<a href="javascript:void(0)" ng-click="openShowWelcome(' + data + ')"><i class="fa fa-eye"></i></a>'
        })
    ];

我展示了模态并初始化了输入

$scope.openEditWelcome = function (welcome_id) {
        WelcomeService.getById(welcome_id).then(function (response) {
            if (response.status == CODE_SUCCESS) {
                $scope.welcome = response.data;
                $scope.editWelcome = true;
            }
        });
    };

我以这种方式尝试过：

    $('#editWelcome').on('shown.bs.modal', function() {
            $("#welcome_description").summernote();
        });

$("#welcome_description").summernote({
            dialogsInBody: true
        });