TinyMCE and <li> unordered list problem!

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
smik
Posts: 25
Joined: Tue Nov 25, 2008 4:02 pm

TinyMCE and <li> unordered list problem!

Post by smik » Wed Jul 11, 2012 12:42 pm

Hi Guys,

in my latest Projekt I used the newest _XH-Version of CMSimple.

Now I got a strange problem, concerning the unordered list display in the editor window: When I activate the unordered list-Button, nothing happens in the editor-window > no bulletpoints, etc. are displayed, but when I klick on "preview", the bulletpoints get displayed properly? It's a little bit annoying because as an editor you can't really tell if there are bulletpoints or not, you have to switch permanently while editing your site.

Does anyone know of this problem and have a solution to it?

Here is a screenshot of that mess: http://imageshack.us/f/256/tinymce.jpg/

Thanks for your support!

Robert

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: TinyMCE and <li> unordered list problem!

Post by Gert » Wed Jul 11, 2012 12:56 pm

Hi Robert,

an image says nothing, what we need is a link to your website, because it seems to be a template related problem (CSS).

Try if it also happens with the standard tempate,

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

cmb
Posts: 13760
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: TinyMCE and <li> unordered list problem!

Post by cmb » Wed Jul 11, 2012 1:04 pm

Hi Robert,

some part of the styling seems to be missing in the edit view. If I look at the screenshots, not only the bullets are missing, but the list is not indented to the right.

tinyMCE includes the template's stylesheet by default (stylesheet.css), but it doesn't use additional stylesheets linked in the <head> of the template. So if you have additional stylesheets linked in the template, you have to declare them to tinyMCE. In plugins/tinymce/inits/init_full.js you'll find:

Code: Select all

    content_css : "%STYLESHEET%",
You can add additional stylesheets there (separated by comma), e.g.

Code: Select all

     content_css : "%STYLESHEET%, ./templates/my_template/stylesheet2.css",
Christoph
Christoph M. Becker – Plugins for CMSimple_XH

smik
Posts: 25
Joined: Tue Nov 25, 2008 4:02 pm

Re: TinyMCE and <li> unordered list problem!

Post by smik » Wed Jul 11, 2012 1:20 pm

@Gert
Thanks for the quick answer! You're right, a link is certainly better, but the problem is in the backend, so you would't see much except I'd give you the password to login. But your tip to try another template helped to realize that actually the problem occurs only in my own template... :roll: :(

@Christoph
Thanks for your tips, I will try out, but I'd be happier if there was another solution! As mentioned above, that problem is unique to my template, so I'd rather change my own template than to mess around with the editor-system-files...
When I know where the problem lies, than I can avoid it in future projects

THANKS SO MUCH!
Last edited by smik on Wed Jul 11, 2012 2:42 pm, edited 1 time in total.

cmb
Posts: 13760
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: TinyMCE and <li> unordered list problem!

Post by cmb » Wed Jul 11, 2012 1:35 pm

Hi Robert,

thanks for the link -- I guess there's no need to log in. The problem: the styling of the list is done in the template's stylesheet line 95ff:

Code: Select all

#content ul{margin-left:50px;}
#content li{
	list-style-position: inside;
	list-style-image:    url(images/bullet2.png);
	line-height: 20px;
}
But tinyMCE, which runs in an IFrame, doesn't have a <div id="content">, so it ignores these styles. And in the template's stylesheet line 2:

Code: Select all

* {padding: 0; margin: 0;}
takes away the padding and margin of the all <ul>'s, so even the bullets can't be seen.

Similar differences between edit and view mode will show up for <a>'s (and all styles that are only defined for #content).

A simple solution: don't restrict the definitions of <ul>,<li>,<a> etc. to #content. If you need to style these differently in other parts of the template, you can do so by restricting them to the surrounding elements.

A cleaner solution would be to have an editor, that's not embedded in an IFrame. Unfortunately none of the good editors are implemented with contentEditable yet.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

smik
Posts: 25
Joined: Tue Nov 25, 2008 4:02 pm

Re: TinyMCE and <li> unordered list problem!

Post by smik » Wed Jul 11, 2012 1:50 pm

Wow, thanks Christoph for the excellent explanation of where the problem lies!
I'd never come across that idea > mainly because I'm not a real coder but a worse autodidactic :lol:

Now I'll try to change things according to your hints!

Best regards from Stuttgart,

Robert

Post Reply