AutoFocus TinyMCE Editor TextArea inside Bootstrap Modal 显示 Modal 时

Question

所以我在项目中的所有文本区域中都使用了 TinyMCE 编辑器。更多关于 TinyMCE 编辑器的文档可以在here 找到。

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

这是按钮：

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

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

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

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

我也在使用 Laravel Collective 来显示 textarea 这页纸。更多关于 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()，但我似乎无法让这个命令工作。也许那甚至不是正确的命令，但也许我正朝着正确的方向前进？文档可以在here about the execCommand()找到。

我也尝试过使用 jQuery，但是每当 TinyMCE 控制一个 textarea 时，它会将 textarea 从一个 <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。

或

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