How to render a richeditor field inside a modal pop-up on the back-end

#1

Hi,

Does anyone have an idea how I might get a richeditor inside a pop-up? My goal is to be able to select records from a list, and then have a button on the top of the list that opens a modal pop-up with a richeditor…

This is my pop-up:

    <div class="control-popup modal fade" id="customEmail" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <form class="form-elements" role="form">
                <div class="modal-content">
                    <div class="modal-header flex-row-reverse">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">
                            Send an email
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label">Your message</label><br />
                            <input type="text" name="mailbody" value="" class="form-control"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-default"
                                data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-primary"
                                data-attach-loading
                                data-request="onSendCustomEmail"
                                data-request-data="id: <?= e($this->id) ?>"
                                data-request-success="$('#customEmail').modal('hide');">
                            Send it
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

It’s no issue to have a simple input field or a textarea, but a richeditor is a bit unclear to me.

Can anyone please set me on the right path please?

#2

Hi.

I have done this in this way:

  1. In your controller add FormField and Richeditor:
use Backend\FormWidgets\RichEditor;
use Backend\Classes\FormField;
  1. In the actual method add this:
  $field = new FormField('description','Label name');
  $richEditor = new RichEditor($this, $field);
  $this->vars['rich_editor'] = $richEditor;
  1. In the modal add this:
<?= $rich_editor->render() ?>

And it should render a richeditor in your modal :slight_smile:
Try it

1 Like
#3

Thank you so much! I managed to get it up and running, using your code. I appreaciate it!

#4

Just to follow-up: I was wondering if you are also experiencing some issues when inserting a link? It seems that I cannot put the focus inside the input fields that are overlayed…

So inserting an external link doesn’t work, as the field doesn’t seem to be accessible:

image
image771×427 21.7 KB

What is your experience with this? Does everything work as expected on your end?

It might be that the richeditor is already inside a popup window over on my end…

#5

Hi,

Yes, I’ve got the same problem (I didnt know it - thanks), Its only function that is overwritten by octoberCMS. I think I will disable the link button for now. But I dont know how to fix it. Maybe a new post about it as a bug report.

#6

Thank you Zaq.

Interesting to know that you have the same issue at the moment. I’ll create a bug report asap.

In the mean time, how do you disable those buttons in our implementation?

#7

In the richeditor variable set the toolbarButtons property as the documentation:

Rich Editor / WYSIWYG - October CMS - 3.x

Example in controller method:

$richEditor->toolbarButtons = 'bold | italic | underline';

1 Like
#8

Thank you!

Just to let you know => if you use “insertLink” instead of “insertPageLink”, you’ll have a working workaround for the link inserting issue…

This is what I used:

$richEditor->toolbarButtons = 'bold, italic, |, insertLink, insertImage, |, html';

So the issue is limited to the input fields that are provided by October CMS. The input fields inherent to the richeditor itself do seem to work.

1 Like
#9

Hi, just heard back from the October team. They respond as follows:

Unfortunately, we can’t reproduce this issue using our test bench (GitHub - octobercms/test-plugin: Test Suite & Playground for October CMS). You can see a working example via Posts → Record #1 → Comments → Record #1 → Rich Editor tab.

Let’s check out the test bench…

1 Like