TinyMCE + jbimages + autoresize not resizing

Question

I'm using TinyMCE with the jbimages plugin for uploading images. I also have the autoresize plugin active so the editor automatically expands and shrinks when content is being added/removed.

This all works fine except when I upload images that are larger than the editor viewport. The editor will not expand in that case.

My code to init tinyMCE is as follows:

tinyMCE.init({
    menubar: false,
    statusbar: false,
    selector: "textarea",
    plugins: [
        "advlist autolink autoresize lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste jbimages textcolor"
    ],
    toolbar: "jbimages",
    relative_urls: false
});

My markup looks like:

<div class="control-group" id="cgroup-order[message]">
<label class="control-label required" id="label-order[message]" for="order[message]">Message to send:</label>
<div class="controls" id="controls-order[message]">
    <textarea name="order[message]" class="pull-left span3 message" id="order[message]"></textarea>
</div>

It seems like the mceAutoResize command isn't being executed when an image is inserted by jbimages. I've already tried adding something like this to the init parameters:

    setup: function(editor) {
        editor.on('SetContent', function(e) {
            editor.execCommand('mceAutoResize');
        });
    }

But it doesn't help much. Any ideas how to make this work properly?

Edit: When I press a key after inserting an image or press a mouse button the editor will be resized, but it doesn't happen automatically.

Edit 2: Okay, so I know the reason for this behavior now at least. What happens is that the autoresize plugin responds to the editor's SetContent event. At that point when a large image is inserted the browser may or may not be done rendering the image. If it's not done rendering the image the new height that autoresize calculates is still the old height for obvious reasons.

I've tried many different things like catching the load event of mce's iframe, but that only triggers when the page loads initially.

I ended up solving it in a really dirty way, using a 1 second timeout to give the browser more time to render the image. Of course this is a duct tape solution at best, because it may not work on slower clients. If anyone has a better solution please let me know.

My code now looks like this:

    tinyMCE.init({
    menubar: false,
    statusbar: false,
    selector: "textarea",
    plugins: [
        "advlist autolink autoresize lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste jbimages textcolor"
    ],
    //toolbar: "insertfile undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | link | jbimages",
    toolbar: "jbimages",
    relative_urls: false,
    autoresize_min_height: 200,
    //autoresize_max_height: 800,
    setup: function(editor) {
        editor.on('SetContent', function(e) {
            if (e.content.indexOf('<img ') == 0)
            {
                setTimeout(function(){ tinymce.activeEditor.execCommand('mceAutoResize'); }, 1000);
            }
        })
    }
});

athlonator athlonator · Accepted Answer · 2015-07-26T08:32:15

I have an idea but My problem didn't have this, but it has already solved many image problem.

ini_set("memory_limit","120M");

It has to be placed in jbimages\ci\system\libraries\Upload.php file

Above this line:

@copy($this->file_temp, $this->upload_path.$this->file_name);

It may solve your problem.

TinyMCE + jbimages + autoresize not resizing

1 Answers