[Bug] - Cleditor textarea expands indefinitely when embedded (Wordpress)

ottorobba

Hi there. On some pages I'm getting a strange error: if a person clicks on "Write a Reply" or the "Show Source" button on CLEditor, the textarea expands infinitely, only stopping when the person clicks the "Show Source" button again. This does not happens on all topics and only when it is embedded.

If it is not embedded, there is also an error, it will have a duplicate textarea - one for source and one for wysiwyg.

You can see it happening here http://www.mongbat.com/forums/#/discussion/4/the-longest-thread-in-the-world-version-2.0/p83 and how it looks when not embedded here http://www.mongbat.com/vanilla/discussion/4/the-longest-thread-in-the-world-version-2.0/p83

Thanks.

EDIT: Github link: https://github.com/vanillaforums/Garden/issues#issue/801

leafboxtea

@mark - I'm having the same issue. Most of my users aren't using the source input box, but this might be added to your already very long to do list...!

Neolo

How to remove source button at all??

khalwat

For what it's worth, using the latest version of CLEditor jQuery WYSIWYG (.5) and the latest .org release of Vanilla Forums (Version 2.0.18.10), this bug still happens.

If the site is embedded using Vanilla, the text input area often goes out of control, resizing itself indefinitely. I can make it happen every time by clicking on the "Show Source" <> icon.

If I view the same exact thread in the same forum when VF isn't embedded, it works fine. So it definitely appears to be related to embedding.

Given how long it's been since the plugin has been updated, I'm guessing there's little hope this will be fixed.

Are there any better alternatives out there?

khalwat

@Neolo said:
How to remove source button at all??

You can remove the source button entirely by opening up jquery.cleditor.min and finding this:

controls:"bold italic underline strikethrough subscript superscript | font size style | color highlight removeformat | bullets numbering | outdent indent | alignleft center alignright justify | undo redo | rule image link unlink | cut copy paste pastetext | print source"

...and then delete the word "source"

It still doesn't fix the problem entirely, though, because my users report still seeing the "run-away text field" on occasion, even with that button removed.

hgtonight

@khalwat Once you embed Vanilla in an iframe, all bets are off in terms of JS conflicts. I highly suggest using button bar instead of cleditor if you don't need the visual editor.

vrijvlinder

@khalwat You can control all that with css

I have an embedded forum in wordpress page. Without adding max-height to the heights of the iframe and textarea , the box gets long for ever. It is a result from autogrow gone bad.

To counteract this you must add max-height to these parts in your custom.css

these are what use try and see if it works for you too:

    .cleditorMain iframe {
     max-height: 450px!important;
    height: 450px!important;
    width: 100%!important;
    overflow:auto;
    }

body.Vanilla.Post textarea#Form_Body.TextBox {
max-height: 450px!important;
overflow:auto;
}

.cleditorMain {
max-height: 450px!important;
}

khalwat

vrijvlinder, you are a life-saver. My second-born child is yours

khalwat

So it turns out this actually didn't fix it, at least not on iPads...

What happens is if you post a reply, the input area then expands vertically forever. I tried adding a max-width in the right places, but to no avail. It also chews up lots of CPU time while doing the resize, rendering it unusable on an iPad.

I'm surprised there is no good solution for a good input field for VanillaForums.org. Embedding has to be a fairly common situation, and iPads and other tablet devices are extremely popular these days.

Obviously an ideal solution is "editor" that is used on the hosted version is released to .org at some point (assuming it works on mobile devices properly).

vrijvlinder

ok for those you need to add that code to the mobile version of the theme.

Remember that mobile and pads use the mobile theme or they may have targeted styling like
@media .

peregrine

@khalwat

did you try buttonbar?

khalwat

vrijvlinder, iPads and such do not use the mobile version of the theme. They use the regular theme.

khalwat

peregrine, yes, at last resort, we're using ButtonBar. It's a far cry from what the other WYSIWYG editors can do.

Actually, and ideal thing would be what I'm typing in now ("editor"). Fingers crossed it gets released outside of the hosted walled garden.

vrijvlinder

yes that's true, this only happens with the forum embedded . I got it to work using !important for the height.

I did notice something is adding height 100% when I view the source using a iPad User agent. So after adding the important it seemed to behave. I tried to look for where this is injected in the plugin but could not find it. I will look further .

khalwat

I'm finding all sorts of other issues with using VanillaForums embedded. The Quotes plugin, for instance, doesn't auto-scroll to the post box the way it does non-embedded.

The Who'sOnline plugin doesn't seem to function properly embedded.

I would think that embedded forums would be quite common, perhaps even more common than non-embedded. So I'm pretty surprised at things that just don't work right embedded.

vrijvlinder

I would not say that it is more common. But there are many factors that can contribute to issues when the forum is embedded.

However the same can be said for embedding wordpress. The same thing happens when you embed a blog somewhere else. It has to do with how the iframe acts under these circumstances.

Anything you embed in an iframe is subject to the environment of where it is embedded . There can be js issues that interfere as well as other plugins from wordpress.

You can test this by embedding your entire website into another page. Just add it like this

<div class="iframe" style=" width:100%;height:1000px;"><iframe src="url to your website"></iframe></div>

You can embed anything like this. even your forum . But depending on what you have going on in the recipient of the iframe, and the iframe contents , are the issues you will face.