How do I configure tinyMCE in revo, and allow images pasted in tinyMCE to float?

68 Posts

robrob Reply #1, 16 years ago

Hi guys.

I’m trying to figure out tinyMCE, how it works in revo, and how to configure it.

So far, I’ve discovered the settings menu for it under ’Settings’->’System Settings’-> filter ’tinyMCE’.

I’ve also discovered this document, but it looks like it might be a little outdated:
http://wiki.modxcms.com/index.php/TinyMCE

There are two particular things I want to acheive:
According to this document, I can change the element format, so that the tags are ouput in an HTML style, as oppossed to an XHTML style:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/element_format

How do I find where to edit this option?

Also, I’m trying to edit an image that I’m pasting into the editor to be floated left. I’d like the text to flow around it.
Apparently, it’s possible to do this with a tinyMCE plugin called advimage. The system settings tell me that this is installed already. But I can’t figure out how to make the image float.

I guessed that the ’style’ dropdown in tinyMCE might be able to offer something, but when I select it, it won’t expand. I’ve tested this in chrome and firefox.

Any idea how I can direct these images to float?

Thanks.

5 Posts

tipichris Reply #2, 16 years ago

Quote from: robrob at Sep 06, 2010, 10:32 PM

I guessed that the ’style’ dropdown in tinyMCE might be able to offer something, but when I select it, it won’t expand. I’ve tested this in chrome and firefox.

I think I can help with that bit. Assuming you have a style sheet somewhere something like this:

floatright {
  float: right;
}

floatleft {
  float: left;
}

go to System->System settings and find the value tiny.css_selectors. Set the value to

Float right=floatright;Float left=floatleft

This will populate your styles drop down in the main TinyMCE window. It will also give an option in the image dialogue to apply a style.

68 Posts

robrob Reply #3, 16 years ago

Thanks

964 Posts

charliez Reply #4, 16 years ago

Are floatright and floatleft classes?
or they just go in the css without dots?

Website: www.mercologia.com
MODX Revo Tutorials: www.modxperience.com

MODX Professional Partner

18 Posts

tavcorp Reply #5, 15 years, 5 months ago

This isn’t working for me. Can anyone help with this?

<img src="images/doctor.jpg" class = "floatleft" alt=""/>

CSS:

.floatleft{
    float: left;
    width:142px;
    height:188px;
    overflow:hidden;
    margin: 0 20px 0px 5px;
    -moz-box-align: center;
    -moz-box-shadow: 0px 0px 5px #999999;
    -webkit-box-shadow: 0px 0px 5px #999999;
    border:6px solid #fcfcfc;        
}

My tiny.css_selectors:

"Star List=star-list;Blockquote=blockquote;Image-Left=floatleft"

I paste in the image. I Select it and select Image-Left. Load in Firefox and nothing is applied. Firebug says that it outputs as

<p>
<img src="...">
Lorem ipsum .....
</p>

Even if the <img> is placed within the <p> tags (which isn’t how I want it), it shouldn’t affect the way the img.class is displayed. Yet when I toggle the editor and remove the img from the <p> tags, the result is the same.

Please help...