CLEditor - URGENT issue with IE11 for everyone using it

weavertheme · December 2013

CLEditor does NOT work with 2.0.18.9 with IE11 - the forum is essentially useless for IE11 visitors since they can't post without know a "secret" click.
More and more of my visitors have switched to IE11 - my e-mail box is filling with complaints of being unable to post on the forum.
THIS IS A BIG PROBLEM FOR ME, and almost certainly for many many other Forums since CLEditor is more or less the default editor for Vanilla installs.

I'm a very skilled PHP programmer, but my jQuery is not as advanced. I cannot find a fix for the current CLEditor plugin, nor can I get the latest version of CLEditor to work properly - maybe some knows the exact mods needed to get it to work?

I know everyone is busy right now, but I think this is a huge issue.

Please don't suggest updating to Vanilla 2.1 as I see many posts emphasizing that is sill Beta and should not be used for a production site.

vrijvlinder · December 2013

You can trim down the buttons in the MCE editor . You can remove or add buttons at will. Find this part in the class.TinyMCEFour.plugin.php and simply remove the buttons and options you do not want from the lists in this block of code. You can also select the simple version instead of advanced and just change that in the ini.js file , change advanced to simple

$().ready(function() {
    $('#Form_Body').tinymce({
        // Location of TinyMCE script
        script_url : '/plugins/TinyMCEFour/tiny_mce.js',

        // General options
        theme : "advanced"



    });
});

You can remove or add the buttons here.

private function _full()
    {
        $html = <<<EOF
            <script type="text/javascript">
                $().ready(function() {
                    $('#Form_Body,body.Profile #Form_Comment,body.Activity #Form_Comment').tinymce({
                        // Location of TinyMCE script
                        script_url : '$this->path/tiny_mce.js',

                        // General options
                        theme : "advanced",

                        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

//These are entire rows of buttons that you can remove or add

                        // Theme options
                        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                        theme_advanced_toolbar_location : "top",
                        theme_advanced_toolbar_align : "left",
                        theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing : true,

                        // Example content CSS (should be your site CSS)
                        content_css : "css/content.css",

                        // Drop lists for link/image/media/template dialogs
                        template_external_list_url : "lists/template_list.js",
                        external_link_list_url : "lists/link_list.js",
                        external_image_list_url : "lists/image_list.js",
                        media_external_list_url : "lists/media_list.js",

                        // Replace values for the template plugin
                        template_replace_values : {
                            username : "Some User",
                            staffid : "991234"
                        }
                    });
                });
            </script>
EOF;
        // No WhiteSpace in front of EOF!!



        return $html;       
    }

businessdad · December 2013

Perhaps I've been lucky, but, apparently, I could make CLEditor 1.4.4 work on Vanilla 2.0.18.9 with the following few steps.

1- Implement the following handler in your theme

public function Base_Render_Before(Gdn_Controller $Sender) {
    $Sender->RemoveJsFile('jquery.js');
    // jQuery 1.7+
    $Sender->Head->AddScript('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'text/javascript', array('sort' => 0));
}

2- Replace the CLEditor files inside the plugin folder with the latest ones.

That should be all. I didn't spend more than a couple of minutes on this, as I don't have much time, therefore I might have missed some glitches (also, I don't have IE11), but it seems to work fine on other browsers. I would just add one more step, as my personal recommendation:

3- Learn about jQuery. Knowing PHP inside out, but being weak on jQuery (or JavaScript) can have a huge impact on your work. In case it was not clear, I'm a fan of flexibility, rather than high specialisation.

R_J · December 2013

Maybe using another wysiwyg editor is a fast "solution" http://vanillaforums.org/addon/tinymcefour-plugin

weavertheme · December 2013

That may be the ultimate answer if I can figure out how to trim down the number of formatting buttons it has in the default setups. But -- changes like that really upset users, so keeping the current editor they are used to would be preferable.

vrijvlinder · December 2013

You can trim down the buttons in the MCE editor . You can remove or add buttons at will. Find this part in the class.TinyMCEFour.plugin.php and simply remove the buttons and options you do not want from the lists in this block of code. You can also select the simple version instead of advanced and just change that in the ini.js file , change advanced to simple

$().ready(function() {
    $('#Form_Body').tinymce({
        // Location of TinyMCE script
        script_url : '/plugins/TinyMCEFour/tiny_mce.js',

        // General options
        theme : "advanced"



    });
});

You can remove or add the buttons here.

private function _full()
    {
        $html = <<<EOF
            <script type="text/javascript">
                $().ready(function() {
                    $('#Form_Body,body.Profile #Form_Comment,body.Activity #Form_Comment').tinymce({
                        // Location of TinyMCE script
                        script_url : '$this->path/tiny_mce.js',

                        // General options
                        theme : "advanced",

                        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

//These are entire rows of buttons that you can remove or add

                        // Theme options
                        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                        theme_advanced_toolbar_location : "top",
                        theme_advanced_toolbar_align : "left",
                        theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing : true,

                        // Example content CSS (should be your site CSS)
                        content_css : "css/content.css",

                        // Drop lists for link/image/media/template dialogs
                        template_external_list_url : "lists/template_list.js",
                        external_link_list_url : "lists/link_list.js",
                        external_image_list_url : "lists/image_list.js",
                        media_external_list_url : "lists/media_list.js",

                        // Replace values for the template plugin
                        template_replace_values : {
                            username : "Some User",
                            staffid : "991234"
                        }
                    });
                });
            </script>
EOF;
        // No WhiteSpace in front of EOF!!



        return $html;       
    }

R_J · December 2013

According to their homepage, support for ie11 is new in latest version: http://premiumsoftware.net/CLEditor/WhatsNew

Maybe updating cleditor will help?

weavertheme · December 2013

Just updating to the latest CLE code does not work - at lease by simply replacing the existing one, or the one used in Vanilla 2.1. Doesn't hook correctly into 2.0.18.

I can't be the only one using Vanilla 2.0.18 with the existing, old and broken CLEditor...

But @vrijvlinder 's answer on how to select a custom set of buttons for TinyMCEFour works. It was pretty fast and simple to simply pick the set I wanted for my users, and replace CLEditor. So that is my solution, and will probably work for others as well. Not that hard to edit out the buttons that are really above the necessity of forum users.

vrijvlinder · December 2013

You can't use the cleditor for 2.1 in 2.0 because it uses a different jquery version.

weavertheme · December 2013

@vrijvlinder -

I don't think it is because of my changes, but TinyMCEFour is pretty broken, too.

If you try to edit someone else's post, you get a plain text box that gives a "Body Required" error when you save.

And after you leave a reply, you get a double text box - one plain, the other with the editor buttons. And if you enter text into the plain text box, you are back to the "Body Required" situation.

So for whatever reason, TinyMCEFour is not always overriding the text box on comment replies.

At least this is what is happening on my sites - including one that is just a default Vanilla installation with a couple of categories added.

Here's a screen capture of that image (on the fresh Vanilla install):

Get the same results with the unmodified version of the plugin as well. Easiest way to get this is to try to edit an existing comment.

vrijvlinder · December 2013

hmmm let me check that , I recall it was happening and then I fixed it ...

vrijvlinder · December 2013

Ok try this , In the same file and block of code you edited buttons, change

 $('#Form_Body,body.Profile #Form_Comment,body.Activity #Form_Comment').tinymce({

to

 $('#Form_Body').tinymce({

Let me know if that fixes it , by the way, this editor works with emotify also if you want to use that plugin as well. You can also edit the emoticons that come with the editor .

businessdad · December 2013

Perhaps I've been lucky, but, apparently, I could make CLEditor 1.4.4 work on Vanilla 2.0.18.9 with the following few steps.

1- Implement the following handler in your theme

public function Base_Render_Before(Gdn_Controller $Sender) {
    $Sender->RemoveJsFile('jquery.js');
    // jQuery 1.7+
    $Sender->Head->AddScript('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'text/javascript', array('sort' => 0));
}

2- Replace the CLEditor files inside the plugin folder with the latest ones.

That should be all. I didn't spend more than a couple of minutes on this, as I don't have much time, therefore I might have missed some glitches (also, I don't have IE11), but it seems to work fine on other browsers. I would just add one more step, as my personal recommendation:

3- Learn about jQuery. Knowing PHP inside out, but being weak on jQuery (or JavaScript) can have a huge impact on your work. In case it was not clear, I'm a fan of flexibility, rather than high specialisation.

vrijvlinder · December 2013

To edit comments using the TinyMCE Editor, Copy the comment to be edited then delete the comment. Paste the comment into the Editor or html editor and edit then save.

weavertheme · December 2013

@vrijvlinder - no, that did not make any difference.

Some other script seems to be opening a text box when you click Edit on previuos comments - but then doesn't respond to the Save Comment button - or gets to a "Body is Required" state.

weavertheme · December 2013

I'm sure my moderators will not tolerate that work around...

vrijvlinder · December 2013

The reason that is , is because the comment contains html, what you see the box above the editor , it is the html form of the comment.

I am not sure why that is happening however you can just copy the comment you want to edit then delete it. After that just paste it in the editor and edit then save.

vrijvlinder · December 2013

Yes I understand, I will work on a fix ...I think the problem is we are loading several jquery versions and I need to add a $.noConflict(true) somewhere so they don't conflict.

weavertheme · December 2013

@businessdad -

Your solution did work! None of my other plugins seem to be broken, and the updated CLEditor works. So to summarize:

Add the delete old jquery.js and use the new version from goolge host. Note that most themes will already have a 'Base_Render_Before' defined. Mine was in the main hooks.php class file. Just added the lines to replace the jQuery there.
Replace the appropriate .js files in the cleditor plugin directory. There are 3 files, the .js go in the plugin js directory, and the .css in the design directory.

So - Thanks for all the input, and I hope this info helps everyone, including those who would prefer TinyMCE for the editor, assuming that gets fixed.

businessdad · December 2013

@weavertheme said:
businessdad -
Your solution did work! None of my other plugins seem to be broken, and the updated CLEditor works.

I will now deserve the badge for the "lucky shot solution".

vrijvlinder · December 2013

No it is not luck, it is jquery.js.......

CLEditor - URGENT issue with IE11 for everyone using it

Best Answers

Answers