Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Firefox 11 and multiple TinyMCE HTMLTextFields


Reply


8 Posts   1968 Views

Avatar
bartvanirsel

Community Member, 94 Posts

3 April 2012 at 9:21pm

Hi,

I had a problem with multiple TinyMCE editors in the latest release of Firefox (11) not being displayed.
Silverstripe 3 wont have this problem, because TinyMCE will probably be the latest version.

For anyone who had the same problem, i found a temporarily solution for Silverstripe 2.4:

in your _config.php include a custom js file for the cms:

LeftAndMain::require_javascript('mysite/javascript/cms.js');

in this javacsript add the folowing:

Behaviour.register({
'#Form_EditForm' : {
initialize : function() {
this.observeMethod('PageLoaded', this.adminPageHandler);
this.adminPageHandler();
},
adminPageHandler : function() {

jQuery(window).load( function() {
jQuery(".mceEditor .mceLayout").each(function(i,ele){
jQuery("#"+ele.id).css('width',jQuery("#"+ele.id).width()+10)
});
});

}
}
});

Credits for the fix for older tinmce version in firefox 11 go to:
[url]http://stackoverflow.com/questions/9837629/tinymce-and-firefox-11[/url]

Hope this helps you.

Cheers,

Bart

Avatar
bartvanirsel

Community Member, 94 Posts

3 April 2012 at 9:43pm

Above solution does not work after all, hope anyone else did manage to solve it :(

Avatar
bartvanirsel

Community Member, 94 Posts

4 April 2012 at 1:25am

Kind of a lonely conversation with myself but the js needs to be the following to fix it:

Behaviour.register({
'#Form_EditForm' : {
initialize : function() {
this.observeMethod('PageLoaded', this.adminPageHandler);
this.adminPageHandler();
},
adminPageHandler : function() {

},
onload : function() {
jQuery(".mceEditor .mceLayout").each(function(i,ele){
jQuery("#"+ele.id).css('width',jQuery("#"+ele.id).width()+1)
});
}
}
});

cheers,

Bart

Avatar
MartinDoornekamp

Community Member, 1 Post

4 April 2012 at 1:42am

Thanks Bart!

Avatar
edski

Community Member, 12 Posts

11 April 2012 at 1:12am

Thanks, Bart - I've been looking out for a fix for this!

Has anyone resolved it for front end forms? We've got some sites with fairly complicated forms for end users and the same thing happens.

Avatar
edski

Community Member, 12 Posts

19 April 2012 at 1:33am

We've managed to figure this out, albeit slightly crudely. In the ss template file add the following:

<script type="text/javascript">

      var FIREFOX = /Firefox/i.test(navigator.userAgent);
      if (FIREFOX) {
         jQuery(window).load( function() {
            
            jQuery(".mceEditor .mceLayout iframe").each(function(i,ele){
               jQuery(this).css('width',jQuery(this).width()+1);
            });
         });
      }
   </script>

Avatar
edski

Community Member, 12 Posts

19 April 2012 at 1:41am

The issue is also happening when using a DataObjectManager popup with multiple editors.

Has anyone experienced the same issue?

Avatar
edski

Community Member, 12 Posts

19 April 2012 at 2:13am

Edited: 19/04/2012 2:13am

This patch is crude, but it works! Essentially add a literal field to the DataObjectManager popup with the appropriate JS in it:

class MyDataObject extends DataObject{

$FFpatch = '<script type="text/javascript">var FIREFOX = /Firefox/i.test(navigator.userAgent);if (FIREFOX) {jQuery(window).load( function() {jQuery(".mceEditor .mceLayout iframe").each(function(i,ele){jQuery(this).css(\'width\',jQuery(this).width()+1);});});}</script>';

public function getCMSFields_forPopup()
{
...
return new FieldSet(
...
new LiteralField("FFPatch", $FFpatch)
);

}
}