Subscribe: RSS
  • Hi All

    After installing MODx 1.0.3 with the upgraded TinyMCE plugin (3.3.2), I have noticed that the CSS selectors are not behaving as they used to.

    Using styles defined in "manager->tools->configuration->interface & features->TinyMCE settings->CSS selectors" now seems to generate a nested span tag with the class assigned, even if you had selected the whole element.

    Apparently, this is due to a change in the TinyMCE CSS engine.
    (see: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=20905)

    My solution:

    1. Remove all selectors from manager->tools->configuration->interface & features->TinyMCE settings->CSS selectors

    2. Go to Elements->Manage Elements->Plugins->TinyMCE and add your styles to the custom parameters field, using the style_formats option (http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/style_formats)

    eg:
    style_formats : [
            {title : 'List with arrows', selector  : 'ul', classes: 'linked'},
            {title : 'Paragraph with border', selector  : 'p', classes : 'bordered'},
            {title : 'Red background', selector  : 'p', classes : 'redbg'}
        ]
    


    This would appear to be a better way of controlling the styles that the editor has available to them, as it allows you to specify which elements can have a specific class.

    Cheers

    Gerard

    • There doesn’t seem to be a way to apply a class to an existing inline element (e.g. anchor).

      Look at gerard’s code – all the styles are for block level elements.

      Please post a solution here if you find a way to do this.
      • Try adding something like this to your style_formats:
        {title : 'My Link Style', selector  : 'a', classes : 'mylinkstyle'}


        Added to my example above:
        style_formats : [
        	{title : 'List with arrows', selector  : 'ul', classes: 'linked'},
        	{title : 'Paragraph with border', selector  : 'p', classes : 'bordered'},
        	{title : 'My Link Style', selector  : 'a', classes : 'mylinkstyle'},
        	{title : 'Red background', selector  : 'p', classes : 'redbg'}
        ]

        That will give you a class mylinkstyle that you can use on anchors

        See: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/style_formats

        Gerard
        • Did it work for you?
          http://tinymce.moxiecode.com/punbb/viewtopic.php?id=20976
          (yeah, that’s me, I get around)
          • Hi Hardboiled

            Just tried your options from the TinyMCE forum:
            style_formats : [
            	{title : 'Link PDF', selector  :  'a', classes  :  'Link-PDF' },
            	{title : 'Bold Class', selector  :  'strong', classes  :  'boldy' },
            	{title : 'Link Web', inline  :  'a', classes  :  'Link-Web'}
            ]
            

            As far as I can tell, they are all behaving as expected.

            1. I placed cursor in an existing anchor tag and selected Link PDF
            result: the Link-PDF class was added to the anchor tag

            2. I placed cursor in existing strong tag and selected Bold Class
            result: the boldy class was added to the strong tag

            3. I selected some text in a paragraph and applied the Link Web style
            result: an anchor tag was created with the Link-Web class added.

            Couple of things I have noticed about this incarnation of TinyMCE which may shed some light on your problem:

            The path bar at the bottom of the editor does not display the classes applied to inline elements, so it might appear as though they are not being applied. Viewing the html source reveals all. (see attached image)

            Also, I had to change the Path to CSS file setting in the manager configuration for my custom style sheet to be picked up by TinyMCE.
            From this:
            /assets/templates/demotemplate/css/style_tinymce.css

            To this:
            assets/templates/demotemplate/css/style_tinymce.css

            (notice the absence of the leading slash)

            Hope this helps

            G

            • That’s a little encouraging. But not for my users – can you imagine having to explain that to non-tech content admins?

              I’ll have to amend my user’s guide to remove the bit about how the Markup Path shows the class name.

              This is unfortunately another step backwards for TinyMCE, especially after the whole ’no way to remove a block format EVAR’ decision way back.
              • Hi, I was using Styles to add different CSS classes to elements and then do some funky stuff with JavaScript on it. This is a quite nice and powerful technique.

                Many thanks gerardL for pointing in the right direction! I made everything working again.

                Quote from: hardboiled at Apr 08, 2010, 12:47 AM

                This is unfortunately another step backwards for TinyMCE, especially after the whole ’no way to remove a block format EVAR’ decision way back.

                @hardboiled If you want to remove a class from a block format use the "remove formatting" button. i.e. select the whole paragraph and push the "remove formatting" button, hope that helps.
                • nice solution!
                  But after aplying these styles, the undo button remains grey?!
                  No matter wether I define the styles in the custom params or in the config settings.
                  Strange
                  • Sorry that I warm up such an old thread, but this is exactly the Solution I was looking for, but how do you do this in 2013.

                    I cannot find the described option:
                    Go to Elements->Manage Elements->Plugins->TinyMCE and add your styles to the custom parameters field, using the style_formats option
                    Editing the TinyMCE Plugin i only find "Create/Edit Plugin", "System Events" and "Properties" :-(.
                      MODX Rocks I am so glad that I have found it.