显示模式时，Bootstrap模式中的AutoFocus TinyMCE编辑器TextArea

Question

所以我在我项目的所有文本区域都使用TinyMCE Editor。 在此处可以找到有关TinyMCE编辑器的更多文档。

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

这是按钮：

这些按钮将启动Bootstrap v4模式。 可以在此处找到有关Modal的文档。 模态示例如下。

现在，让我们只关注Reminders Modal 。 这显然是一种形式。 调出模态时，我在自动聚焦文本区域时遇到问题。 我正在将模态加载到页面上，但是将其隐藏直到激活，但单击按钮。 我不是动态渲染此模态，而是静态模态。

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

注意：我正在使用Laravel 5.6，并且使用Laravel Blade将模态包括在页面中。 该信息不应对该问题的答案有所影响，只是说它只是为了以防万一，它可能是相关的。

我还使用Laravel Collective来在页面上显示文本区域。 在此处可以找到有关Laravel集体文本区域的更多文档。 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时，它就会将textarea从<textarea> HTML标记更改为许多HTML div框。 因此，很难弄清楚要聚焦的目标。

参考文献：

如何设置TinyMCE textarea元素的焦点？

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