顯示模式時，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