Page 1 of 1

TinyMce: how do I control the bullet list?

Posted: Wed Apr 08, 2015 3:23 am
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!

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

Posted: Thu Apr 09, 2015 9:05 am
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.

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

Posted: Thu Apr 09, 2015 9:18 am
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!