0

我有一个 Rails 5 应用程序表单。表单旁边有一个按钮。每当单击按钮时,表单都会自动填充。效果很好。但是,现在我想使用Trix 编辑器向 text_area 字段添加一些编辑选项。表单中的notes字段是 trix_editor。

但是,当我单击按钮自动填写表单时,它不会将内容注入到 Trix 编辑器中。我怎样才能确保发生这种情况?

这是锻炼表格

.panel-body
  .form-group.has-feedback
    .text-muted
      = f.label 'Name the workout'
    = f.text_field :title, class: 'form-control'

  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Swim, Bike or Run?'
    = f.select :kind, Workout.kinds.keys.to_a.map { |s| [s.humanize, s] }, {}, class: 'form-control bootstrap-select'

  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Distance (km)'
    = f.number_field :distance, class: 'form-control', step: :any

  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Duration (Minutes)'
    = f.number_field :duration, class: 'form-control'

  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Notes'
    = f.trix_editor :notes

  .form-group.has-feedback
    .text-muted
      = f.label 'Insert Youtube or Vimeo link'
    = f.text_field :video, class: 'form-control'

这是触发自动填充的按钮

a data-type="useTemplate" data-title=template.title data-kind=template.kind data-distance=template.distance data-duration=template.duration data-notes=template.notes data-video=template.video class="text-default"

这是 CoffeeScript:

$ ->
  $('a[data-type="useTemplate"]').click (e) ->
    $('#workout_title').val(e.target.dataset.title)
    $('#workout_kind').val(e.target.dataset.kind)
    $('#workout_distance').val(e.target.dataset.distance)
    $('#workout_duration').val(e.target.dataset.duration)
    $('#workout_notes').val(e.target.dataset.notes)
    $('#workout_video').val(e.target.dataset.video)

任何帮助将非常感激!

4

1 回答 1

1

要将内容插入到 trix 编辑器,您需要使用 Trix API:

// Assuming #workout_notes is a <trix-editor> element.
$("#workout_notes").get(0).editor.insertString(e.target.dataset.notes)

有关更多信息,请参阅文档

于 2018-08-28T16:43:04.203 回答