TinyMce: how do I control the bullet list?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

TinyMce: how do I control the bullet list?

Post by simonmlewis »

I am running several CSS files for menus and galleries, and they are overriding my li and ul classes, so my bullet points are just vertical lists, without dots or numbers.

I'm using TinyMce to do it, and have been reading about customizing the output of these controls.

Code: Select all

<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#mytextareaid',
menubar : false,
width : 450,
 toolbar: "bullist | undo redo | styleselect | bold italic | link image",
 style_formats: [
   { title: 'bullist', selector: 'ul', classes: 'tinybullet'},
   { title: 'bullist', selector: 'li', classes: 'tinybullet'},
        {title: 'Bold text', inline: 'b'},
    ]
    
});
</script>
I've tried this. So the bullet point button appears.
But when I view the rendered page as the customer would see it, there is no Class in the code. So if I set:

Code: Select all

.tinybullet { font-weight: bold; }
... just as an example, nothing happens.

I need to make sure these bullet points that are rendered on the page (like it might render for Word Press for example), it displays it correctly, as rigth now, there are no dots!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: TinyMce: how do I control the bullet list?

Post by simonmlewis »

If I assign it via the Styles dropdown, it works, but I cannot rely on the user choosing the bullet points, and then selecting the style after that.

I need the Bullet Point button to automatically add the style or Class to the bullet points.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: TinyMce: how do I control the bullet list?

Post by simonmlewis »

I've sorted it out.
Don't know quite why I didn't think of this before, but it's all within a DIV for description.
So:
.description li
{
formatting here
}
.description ul
{
formatting here
}

Easy really!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply