显示模态时自动聚焦 TinyMCE 编辑器 TextArea 位于 Bootstrap 模态内

Question

因此，我对项目内的所有文本区域使用 TinyMCE 编辑器。有关 TinyMCE 编辑器的更多文档，请参见此处。

我有四个不同的按钮，但是让我们只关注一个按钮，并且我确信代码可以从一个按钮复制到其他按钮，因为我希望所有按钮都具有相同的功能。

这是按钮：

这些按钮会弹出 Bootstrap v4 模式。有关 Modal 的文档可以在here找到。下面是该模式的示例。

现在我们只关注提醒模式。这显然是形式的一部分。当我调出模式时，我在自动对焦文本区域时遇到问题。我正在将模式加载到页面上，但将其保持隐藏，直到激活但单击按钮。我没有动态渲染这个模态，它是一个静态模态。

那么让我们回顾一下我的代码。请记住，我们此时只关注提醒按钮和模态，因此下面只会显示与该模态相关的代码。

注意： 我正在使用 Laravel 5.6，并且我使用 Laravel 包含模式 将模态框放入页面的刀片。此信息不应使 这个问题的答案有所不同，只是说一下而已 以防万一它可能是相关的。

我还使用 Laravel Collective 来显示文本区域 页面。更多关于 Laravel 的文档可以在here找到 集体文本区域。 Laravel Collective 不再是原生的 Laravel 框架，因此这些信息也可能相关，但是 极不可能。

@include('components.form.part.modals.reminder')

模态（/resources/views/components/form/part/modals/reminder.blade.php）

<!-- Modal -->
<div class="modal fade" id="reminderModal" tabindex="-1" role="dialog" aria-labelledby="reminderModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reminderModalLabel">Reminder</h5>
            </div>
            <div class="modal-body">
                {{ Form::textarea('reminder', null, ['class' => 'form-control', 'id' => 'reminderInput']) }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary reminderCancel" data-dismiss="modal">Close Without Saving</button>
                <button type="button" class="btn btn-primary reminderSave" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

按钮代码（/resources/views/part/create.blade.php）

<div class="col-sm-6 mt-3">
    {{-- Reminder Modal Button --}}
    <button type="button" class="btn btn-primary btn-block reminderButton" data-toggle="modal" data-target="#reminderModal">
      <i class="fas fa-bell"></i> Reminders
    </button>
</div>

所以这一切都归结为：当模式弹出时如何自动聚焦 TinyMCE 编辑器？

我的尝试：

我已经尝试了多种方法，例如 TinyMCE 编辑器命令，特别是 execCommand()，但我似乎无法让该命令工作。也许这甚至不是正确的命令，但也许我正朝着正确的方向前进？可以在此处找到有关 execCommand() 的文档。

我也尝试过使用 jQuery，但是每当 TinyMCE 控制文本区域时，它就会将文本区域从

<textarea>

HTML 标签更改为许多 HTML div 框。所以很难弄清楚要关注的目标是什么。

参考资料：

如何设置 TinyMCE 文本区域元素的焦点？

Answer 1

您可以执行以下两个选项之一：

1. 当使用

   auto_focus

   选项 (https://www.tiny.cloud/docs/configure/integration-and-setup/#auto_focus) 设置显示模式时初始化tinymce。

或

2. 显示 Bootstrap 模式时调用

   focus()

   (https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#focus)。

我选择了第二个选项，请参阅下面的代码：

// init tinymce
tinymce.init({
  selector: "textarea"
});

// on modal show, focus the editor
$("#exampleModalCenter").on("shown.bs.modal", function() {

  tinyMCE.get("editor").focus();
});

Codepen：https://codepen.io/anon/pen/vzBQod

Answer 2

高尔夫球号： 单击此处输入文本。 报告编号： 单击此处输入文本。 收到日期： 单击此处输入日期。 报告日期： 单击此处输入日期。