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

Question

因此，我将TinyMCE Editor用于项目内部的所有textarea。 here可以找到有关TinyMCE编辑器的更多文档。

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

以下是按钮：

这些按钮调出Bootstrap v4模式。可以here找到有关模态的文档。模态示例如下。

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

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

  

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

     

我还使用Laravel Collective来显示文本区域   这页纸。 here可以找到有关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（），但是我似乎无法使该命令正常工作。也许那甚至不是正确的命令，但也许我正朝着正确的方向前进？可以找到文档here about the execCommand()。

我也尝试过使用jQuery，但是，每当TinyMCE控制一个文本区域时，它就会将文本区域从<textarea> HTML标记更改为许多HTML div框。因此，很难弄清楚要聚焦的目标。

参考：

How do you set the focus of a TinyMCE textarea element?

Answer 1

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

1. 在设置了auto_focus选项（https://www.tiny.cloud/docs/configure/integration-and-setup/#auto_focus）的情况下显示模式时，初始化tinymce。

OR

1. 在显示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