javascriptjquerytwitter-bootstraptinymcebootstrap-modal

AutoFocus TinyMCE Editor TextArea Inside Bootstrap Modal When Modal is Displayed

So I'm using TinyMCE Editor for all my textarea's inside of my project. More documentation can be found here about the TinyMCE Editor.

I have four different buttons, however let's just focus on one button, and I'm sure that the code can be copied from one button to the others as I want all the buttons to have the same funcationality.

Here's the buttons:

Four Buttons

These buttons bring up a Bootstrap v4 modal. Documentation can be found here about Modal's. An Example of the modal is below.

Bootstrap Modal

For right now let's just focus on the Reminders Modal. This is obviously apart of a form. I'm having an issue autofocusing the textarea when I'm bringing up the modal. I'm loading the modal onto the page, but keeping it hidden until activated but the button click. I'm not rendering this modal dynamically and it is a static modal.

So lets go over my code. Remember we are only focusing on the Reminder Button and Modal at this time, so only the code relevant to that modal will be displayed below.

Note: I am using Laravel 5.6 and I'm including the modal using Laravel Blade to put the modal into the page. This information should not make a difference to the answer to this question, just saying it just incase for some off chance it might be relevant.

I'm also using Laravel Collective in order to display the textarea on the page. More documentation can be found here about the Laravel Collective textarea. Laravel Collective is not native anymore with the Laravel Framework, so this information might be relevant as well, but highly unlikely.

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

Modal (/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>

Buttons Code (/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>

So it all boils down to this: How do I auto focus the TinyMCE Editor when the modal pop's up?

My Attempts:

I've tried multiple things such as the TinyMCE Editor Commands, particularly the execCommand(), but I can't seem to get this command to work. Maybe thats not even the right command, but maybe I'm going in the right direction? Documentation can be found here about the execCommand().

I've also tried using jQuery, however whenever TinyMCE takes control of a textarea, it changes the textarea from a <textarea> HTML tag, to numerous HTML div boxes. So it's kind of hard to figure out what to target to focus.

References:

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

Solution

  • You could do one of the two options below:

    1. Initialize tinymce when the modal is shown with the auto_focus option (https://www.tiny.cloud/docs/configure/integration-and-setup/#auto_focus) set.

    OR

    1. Call focus() (https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#focus) when the Bootstrap modal is shown.

    I've opted for the second option, see the code below:

    // 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