We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4018
    • 1,131 Posts
    Starting with the 2.0.6.1b version of the TinyMCE plugin, some new configuration options have been introduced that allow for customizing the Full Featured theme in TinyMCE. Rather than allowing for customization of the plugin on a user-by-user level, these parameters allow you to customize the Full Featured theme to include only the plugins and features you want available to each user. In most cases, this level of customization should suffice since you’ll likely only need one customized theme to cover all user’s needs.

    So, here’s some info that’ll help alleviate some of the confusion on how these new parameters work. Further information about specific TinyMCE configuration options, buttons, and/or plugins are referenced in the TinyMCE Documentation.

    After you have installed the latest version of the TinyMCE plugin, go to Manage Resources and click on the Configuration tab of the TinyMCE plugin. You should see the following plugin parameters:



    With the exception of the Web Theme parameter, all of the parameters correspond to a specific option of the TinyMCE configuration. Here’s a list of all the available parameters and their corresponding TinyMCE options:

    Plugins = plugins
    Button Row 1 = theme_advanced_buttons1
    Button Row 2 = theme_advanced_buttons2
    Button Row 3 = theme_advanced_buttons3
    Button Row 4 = theme_advanced_buttons4
    Disabled Buttons = theme_advanced_disable
    Block Formats = theme_advanced_blockformats


    Further information of what these options are and what they do can be found in the TinyMCE Configuration Reference pages. Pretty much all the parameters are just comma separate values with no spaces.

    To further illustrate how these options might be used, let’s look at an example. In my case, I didn’t want every available option of the default Full Featured plugin and button set; I only wanted a base set of options that would allow content editors plenty of control but without any of the options that might be harmful to the editing of content. I didn’t want any users to be able to change fonts, colors, add tables, or anything else other than just the basics. So I edited the different parameter values and came up with a simple set of options that should suffice for most users. The result was just three button rows and only a handful of plugins. Here’s what I entered in the fields:

    Plugins = advimage,advlink,emotions,preview,flash,searchreplace,print,contextmenu,paste,fullscreen
    Button Row 1 = newdocument,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect
    Button Row 2 = cut,copy,paste,separator,search,replace,separator,pastetext,pasteword,selectall,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,flash
    Button Row 3 = removeformat,visualaid,separator,sub,sup,separator,charmap,emotions,separator,print,separator,fullscreen,cleanup,help,separator,code,preview
    Button Row 4 = 
    Disabled Buttons = 
    Block Formats = p,h1,h2,h3,h4,h5,h6


    Noticed that I left the Button Row 4 parameter blank. By leaving it complete blank the row will not show up since nothing is assigned to it. Also, I didn’t put anything in the Disabled Buttons field. Although this field isn’t all that useful, it does serve a purpose when you want to ensure that a specific feature is blocked even if the plugin appears in the plugins field. Later on, the Disabled Buttons field will be further enhanced to allow for user-by-user blocking of buttons. As for the Block Formats field, I only wanted the use of paragraphs and header tags so changing it to reflect the use of only these tags. This automatically populates the Block Formats dropdown list in TinyMCE with the respective formats. After editing the fields with the options above, the toolbar for the Full Featured theme looks like this:



    With a little reading of the TinyMCE Documentation, these options are pretty straight-forward and easy to get a handle on. The customization they provide is just a start and I hope to have further capabilities of customizing TinyMCE on a more user-by-user level in future versions of the plugin.

    If you have any further questions or comments about this topic, feel free to reply here! Till then, happy coding! smiley

    Jeff
      Jeff Whitfield

      "I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."
      • 25663 MODX Staff
      • 12,272 Posts
      Very very cool Jeff ... thanks! laugh
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 6726
        • 7,075 Posts
        I was just plunging into customizing TinyMCE, it just is the perfect time for this !

        But I am curious : I had a TInyMCE 2.0.6.1b installed and it didn’t ship with this, is it a later rev (and is it bundled with rev1785) ?
          .: COO - Commerce Guys - Community Driven Innovation :.


          MODx est l'outil id
          • 32982
          • 674 Posts
          hi is posibol to configure multiples instances of tyny mce
          i test duplicating plugin but it dont work
            Jabiertxof (formerly XYZVISUAL)
            My bussines: http://marker.es
            https://www.youtube.com/user/jabiertxof/videos
            • 23050
            • 1,842 Posts
            Jeff, thanks a lot ... the only thing I was dreaming about, you made it ! wink

            I updated from beta 3 to beta 5 and tinymce doesn’t show up when editing document, even if I select it in the drop down menu. Do you know any issue about that ?
            (Another french guy also has this issue).
              • 17802
              • 190 Posts
              This post is exactly what I needed. Thank you!! laugh
                Thanks for MODx - I love it!
                • 17673
                • 194 Posts

                These are very important features accessibility-wise, and in general to keep the contents clean, see this article from accessibility-guru Roger Johansson .

                I’m tweaking my TinyMCE by removing all the styling tools aside from:
                ’Styles’ menu - links to CSS classes found in the site template
                Format menu - provides basic P, DIV, H1 etcetera
                Image Importer
                Link & Anchor Editors
                a few other things...

                While we have specific buttons for Acronyms and Abbreviations Tags, it is difficult to add other important accessibility HTML attributes such us ’lang’, ’dir’ to html tags once they’re coded; for example, if I select some text and include it in a <p>...</p> by using the ’Format’ menu, how do I recover this <p> to add attibutes to it ??! currently I am switching to the raw HTML source, but is there a better way ?
                ...I’d really like to keep the site editors away from the HTML source !

                  ----------------------------------------------------------
                  http://www.linkedin.com/in/lucapost/
                  http://www.twitter.com/lukwe/
                  ----------------------------------------------------------
                  • 30223
                  • 1,010 Posts
                  Place the cursor somewhere within the p tag, Look at the tinyMCE statusbar and you’ll see a list of tags surrounding the text where your cursor is. Click on the p in that list and you’ll have th ep tag selected. You can then use the "Edit Css Style" button (4th row 5th button in default install) to set classes, inline styles or whatever....
                    • 17673
                    • 194 Posts

                    Thanks... but the ’Edit Css Style’ sets css properties, while what I need is editing HTML tags’ attributes, i.e.
                    changing [tt]<span>italiano</span>[/tt] to [tt]<span xml:lang="en" lang="en">italiano</span>[/tt] , as required to ensure that screen-readers correctly read the enclosed text.

                    Besides, this button adds in-line styles to HTML elements instead of referring classes from the external Css file, a no-no approach to site maintainance (the ’separate layout, content, behaviours’ mantra...).

                    I also realized that the ’Format’ button is pretty broken in the current tinyMCE version
                    ...for example: if I select a portion of text from a block/paragraph and I apply a [tt]<pre>[/tt] from the FormatMenu to it the [tt]<pre>[/tt] ends up including the whole paragraph! (?)


                    BTW has anyone tried the Xstandard editor?!
                      ----------------------------------------------------------
                      http://www.linkedin.com/in/lucapost/
                      http://www.twitter.com/lukwe/
                      ----------------------------------------------------------
                      • 25663 MODX Staff
                      • 12,272 Posts
                      Isn’t pre a block element?
                        Ryan Thrash, MODX Co-Founder
                        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me