Problem setting TinyMCE width on front end

☆ A M B ☆
326 Posts

aladage Reply #1, 12 years, 2 months ago

Hi all! I'm trying to get TinyMCE to work on the front end of a site I'm building. I've actually got almost everything working correctly; however, I can't get Tiny to abide by the width I'm setting for it.

I'm using a script written by Bob Ray to instantiate the editor:

<?php
$props = $scriptProperties;
 
/* set rich text content placeholders and includes necessary js files */
$tinyPath = $modx->getOption('core_path') . 'components/tinymce/';
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/ext3/adapter/ext/ext-base.js');
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/ext3/ext-all.js');
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/modext/core/modx.js');
 
 
$whichEditor = $modx->getOption('which_editor', null, '');
 
$plugin = $modx->getObject('modPlugin', array('name' => $whichEditor));
if ($whichEditor == 'TinyMCE') {
    //$tinyUrl = $this->modx->getOption('assets_url').'components/tinymcefe/';
    $tinyUrl = $modx->getOption('assets_url') . 'components/tinymce/';
    /* OnRichTextEditorInit */
 
    $tinyproperties = $plugin->getProperties();
    require_once $tinyPath . 'tinymce.class.php';
    $tiny = new TinyMCE($modx, $tinyproperties, $tinyUrl);
    // if (isset($this->props['forfrontend']) || $this->modx->isFrontend()) {
    if (isset($props['forfrontend']) || $modx->context->get('key') !=
        'mgr') {
        $def = $modx->getOption('cultureKey', null, $modx->getOption('manager_language', null,
            'en'));
        $tinyproperties['language'] = $modx->getOption('fe_editor_lang', array(),
            $def);
        $tinyproperties['frontend'] = true;
        unset($def);
    }
    $tinyproperties['cleanup'] = true;
     /* prevents "bogus" bug */
   $tinyproperties['width'] = empty($props['tinywidth']) ? '95%' : $props['tinywidth'];
    $tinyproperties['height'] = empty($props['tinyheight']) ? '400px' : $props['tinyheight'];
 
    //$tinyproperties['tiny.custom_buttons1'] = 'image';
    //$tinyproperties['tiny.custom_buttons2'] = '';
 
    $tiny->setProperties($tinyproperties);
 
    $html = $tiny->initialize();
 
    $modx->regClientStartupScript($tiny->config['assetsUrl'] .
        'jscripts/tiny_mce/langs/' . $tiny->properties['language'] . '.js');
    $modx->regClientStartupScript($tiny->config['assetsUrl'] .
        'tiny.browser.js');
    //mod by Bruno
 
    if ($props['hasimagetv']) {
        $rt_configs = array("selector" => "rt_imagetv", "width" => $props['imageTvWidth'],
            "height" => $props['imageTvHeight'], "buttons1" => "image", "buttons2" => "",
            "theme_advanced_buttons1" => "image", "theme_advanced_buttons2" => "", );
 
        $cfg = '';
        foreach ($rt_configs as $cf_key => $cf_value) {
            $cfg .= 'Tiny.config.' . $cf_key . ' = "' . $cf_value . '";';
        }
        $js .= $cfg . ' MODx.loadRTE();';
    }
 
    $modx->regClientStartupHTMLBlock('<script type="text/javascript">
                       Ext.onReady(function() {
                       MODx.loadRTE();
                       ' . $js . '
                       });
                   </script>');
 
}
 /* end if ($whichEditor == 'TinyMCE') */

You will notice this line:

$tinyproperties['width'] = empty($props['tinywidth']) ? '95%' : $props['tinywidth'];

However, changing that number to a fixed pixel width (either in this script or in the property set) doesn't work, and if I set a percentage, the editor will narrow, but the content continues to scroll horizontally. I've also played around with setting a width on the textarea, or wrapping the textarea in a div and setting a width on it, and neither fixes the issue.

Can anyone help? I can provide a link via PM but would prefer not to share the page publicly quite yet. Thanks!

MODX Staff
2,502 Posts

Jay Gilmore Reply #2, 12 years, 2 months ago

Aaron,

Can you PM me the link or DM me on Twitter and I'll take a peek. My guess is how tiny is calculating the width and based on what element.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

☆ A M B ☆
326 Posts

aladage Reply #3, 12 years, 2 months ago

Thanks, Jay -- I sent a PM your way.

24,544 Posts

BobRay Reply #4, 12 years, 2 months ago

I can't take credit for that code, though it's in my Extra. It's the work of a number of other people including splittingred, Bruno17, and (mostly responsible for the newest code and fixing critical bugs) Marcus Schlegel. I'll ask Markus to take a look at this post.

---------------------------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using . . . PLEASE!
MODX info for everyone: http://bobsguides.com/modx.html

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

☆ A M B ☆
326 Posts

aladage Reply #5, 12 years, 2 months ago

Thanks, Bob, and sorry for not giving credit where credit was due. It's a wonderful piece of code and saved me a ton of work, and I appreciate everyone's contributions.

I also want to clarify that this isn't really a width problem; it's a wrapping problem. I can set a width on TinyMCE, but the content within it is not abiding by the width and wrapping like it should, causing a horizontal scroll. I'm not sure I completely understood what was going wrong before, which is why my explanation may have been a little vague.

With some help from @archwisp on Twitter, I've been able to nail the problem down: on the body tag within the iframe TinyMCE generates, there's an inline style that's declaring white-space: nowrap. Removing it in Firebug solves the problem. I'm fairly sure this is being generated somewhere in the TinyMCE javascript, but I'm having a hard time locating where. Can anyone point me in the right direction?

☆ A M B ☆
326 Posts

aladage Reply #6, 12 years, 2 months ago

It dawned on me that TinyMCE has a plugin property called "nowrap," but I checked and it's set to "No" already. I then added a few lines to the snippet above to see if I could pull in that setting, so it now looks like this:

<?php
$props = $scriptProperties;
 
/* set rich text content placeholders and includes necessary js files */
$tinyPath = $modx->getOption('core_path') . 'components/tinymce/';
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/ext3/adapter/ext/ext-base.js');
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/ext3/ext-all.js');
$modx->regClientStartupScript($modx->getOption('manager_url') .
    'assets/modext/core/modx.js');
 
 
$whichEditor = $modx->getOption('which_editor', null, '');
 
$plugin = $modx->getObject('modPlugin', array('name' => $whichEditor));
if ($whichEditor == 'TinyMCE') {
    //$tinyUrl = $this->modx->getOption('assets_url').'components/tinymcefe/';
    $tinyUrl = $modx->getOption('assets_url') . 'components/tinymce/';
    /* OnRichTextEditorInit */
 
    $tinyproperties = $plugin->getProperties();
    require_once $tinyPath . 'tinymce.class.php';
    $tiny = new TinyMCE($modx, $tinyproperties, $tinyUrl);
    // if (isset($this->props['forfrontend']) || $this->modx->isFrontend()) {
    if (isset($props['forfrontend']) || $modx->context->get('key') !=
        'mgr') {
        $def = $modx->getOption('cultureKey', null, $modx->getOption('manager_language', null,
            'en'));
        $tinyproperties['language'] = $modx->getOption('fe_editor_lang', array(),
            $def);
        $tinyproperties['frontend'] = true;
        unset($def);
    }
    $tinyproperties['cleanup'] = true;
     /* prevents "bogus" bug */
   $tinyproperties['width'] = empty($props['tinywidth']) ? '50%' : $props['tinywidth'];
    $tinyproperties['height'] = empty($props['tinyheight']) ? '400px' : $props['tinyheight'];
    $tinyproperties['nowrap'] = empty($props['nowrap']) ? 'No' : $props['nowrap'];
 
    //$tinyproperties['tiny.custom_buttons1'] = 'image';
    //$tinyproperties['tiny.custom_buttons2'] = '';
 
    $tiny->setProperties($tinyproperties);
 
    $html = $tiny->initialize();
 
    $modx->regClientStartupScript($tiny->config['assetsUrl'] .
        'jscripts/tiny_mce/langs/' . $tiny->properties['language'] . '.js');
    $modx->regClientStartupScript($tiny->config['assetsUrl'] .
        'tiny.browser.js');
    //mod by Bruno
 
    if ($props['hasimagetv']) {
        $rt_configs = array("selector" => "rt_imagetv", "nowrap" => $props['nowrap'], "width" => $props['imageTvWidth'],
            "height" => $props['imageTvHeight'], "buttons1" => "image", "buttons2" => "",
            "theme_advanced_buttons1" => "image", "theme_advanced_buttons2" => "", );
 
        $cfg = '';
        foreach ($rt_configs as $cf_key => $cf_value) {
            $cfg .= 'Tiny.config.' . $cf_key . ' = "' . $cf_value . '";';
        }
        $js .= $cfg . ' MODx.loadRTE();';
    }
 
    $modx->regClientStartupHTMLBlock('<script type="text/javascript">
                       Ext.onReady(function() {
                       MODx.loadRTE();
                       ' . $js . '
                       });
                   </script>');
 
}
 /* end if ($whichEditor == 'TinyMCE') */

Sadly, this didn't fix the problem. Still trying to figure out how to get rid of that "nowrap" on the body, but I can't find it anywhere. Gah!

24 Posts

mschlegel Reply #7, 12 years, 2 months ago

I'm afraid I can't help you directly because I can't reproduce the problem. I just want to point out that the code was simplified in the development version of NewsPublisher (see https://github.com/BobRay/newspublisher/blob/dev/core/components/newspublisher/classes/newspublisher.class.php#L369). It also fixes an error that occurred with multiple richtext fields. However I don't know if this will solve your problem (maybe not...), but it could be worth a try.

Markus

☆ A M B ☆
326 Posts

aladage Reply #8, 12 years, 2 months ago

I'm looking at the github files...any chance you can tell me how to run it independently of newspublisher? It looks like lines 369-400 will do the trick, but I'm getting a little lost on how to use them independently of the function.

Also, I'm going to PM you a link to the page in question so you can see my issue. Let me know if you see anything obvious with removing the nowrap. Thanks!

24 Posts

mschlegel Reply #9, 12 years, 2 months ago

Thanks, I got the link.
Yes, to be precise the lines 370-398. This could look like this:

                    $plugin=$modx->getObject('modPlugin',array('name'=>'TinyMCE'));

                    /* set rich text content placeholders and includes necessary js files */
                    $modx->regClientStartupScript($modx->getOption('manager_url').'assets/ext3/adapter/ext/ext-base.js');
                    $modx->regClientStartupScript($modx->getOption('manager_url').'assets/ext3/ext-all.js');
                    $modx->regClientStartupScript($modx->getOption('manager_url').'assets/modext/core/modx.js');

                    $tinyPath = $modx->getOption('core_path').'components/tinymce/';
                    $tinyUrl = $modx->getOption('assets_url').'components/tinymce/';
                    /* @var $plugin modPlugin */
                    $tinyproperties=$plugin->getProperties();
                    require_once $tinyPath.'tinymce.class.php';
                    $tiny = new TinyMCE($modx, $tinyproperties);

                    $tinyproperties['language'] = $modx->getOption('cultureKey',null,$modx->getOption('manager_language',null,'en'));
                    $tinyproperties['frontend'] = true;
                    $tinyproperties['cleanup'] = true; /* prevents "bogus" bug */
                    $tinyproperties['width'] = '95%'; // set your width here
                    $tinyproperties['height'] = '400px'; // your height here

                    $tiny->setProperties($tinyproperties);
                    $tiny->initialize();

                    $modx->regClientStartupHTMLBlock('<script type="text/javascript">
                        delete Tiny.config.setup; // remove manager specific initialization code (depending on ModExt)
                        Ext.onReady(function() {
                            MODx.loadRTE();
                        });
                    </script>');

☆ A M B ☆
326 Posts

aladage Reply #10, 12 years, 2 months ago

Actually, I did get it to work (just stripped out all of the "$this->" references), but it's having the same problem. I again tried adding this:

$tinyproperties['nowrap'] = 'No';

or this:

$tinyproperties['nowrap'] = false;

but neither of these fixed it.