Read About Stuff We Do. Pagelime Blog.

Content Management for Designers and Agencies.

How to limit the number of icons/tools on the PageLime WYSIWYG editor

So a lot of folks have asked us to provide some way of limiting the number of icons (tools) available in the WYSIWYG editor that pops up when you click on a green bubble in PageLime.

We’ve recently released two features that cover this request:

  1. You can append “-text” to your cms-editable CSS class (for example: “cms-editable-text” or “tomiscool-text“), to restrict the number of icons/tools available for that area.
  2. You can configure what tools are available for HTML vs. Text areas in a new tab in the settings for each site.

So, for example, a DIV tag which has limited WYSIWYG options would look like this:

<div id="intro" class="cms-editable-text">
    Hello World
</div>

In the screenshot below, you can see what the new tab in the Site Settings screen looks like. This is where you can configure which icons/tools appear in the WYSIWYG toolbars. To add/remove items  to the toolbars you drag and drop icons from the right into the toolbars on the left. There are two toolbars, the first of which always shows (for both HTML and Text areas), and the second shows ONLY on HTML areas.

limit-wysiwyg-icons-in-pagelime

Also, you will notice that there is a button to “toggle simple mode“. When you click this button, the toolbars will change from the visual mode to a standard text area, so that you can copy and paste the text to and from your other sites. This is useful when you want to copy your toolbar configuration from one site to another, without having to go through the whole drag-drop process again.

We hope that this is a helpful feature, and that our user experience is on point. We tried to think through how people would like to manage their toolbars, and the drag-and-drop interface seemed like the best option, while also providing the “simple mode” for moving data around.

Comments, suggestions, and gripes are welcome! (As long as the gripes are directed at Tom).

Tom says: Emil is just sad at all the PageLime user friends I’m making. Someone please send him an email with a puppy or a red panda. He loves them.

7 Responses to “How to limit the number of icons/tools on the PageLime WYSIWYG editor”

  1. Rick says:

    Hi Guys – great feature – feature request: how about a text mode that is even more simplified, with no options, user is only able to edit text. This would be great for the website name on the MasterHeader or footer.

  2. Darrell says:

    My first tool change worked fine. But after that, any additions, or subtractions, of tools do not appear in the editor. I know, clear the cache, right?

    Also, when attempting to drag a button off of the toolbar, and back into the tool box, all my tools just slide down the screen, like an old game of Centipede.

    I have to switch to simple mode, and delete the text entry instead. Drag and drop fails.

  3. Emil says:

    Hey Darrell, the issue is darn IE8 compatibility mode. Drag and drop just doesn’t seem to work on that combination no matter what we do. That’s why we allow the “simple mode” where you can edit the buttons with text. We’ll figure out how to fix this for IE8 some day :) … even if it’s the last thing we do!!! (movie voice).

  4. Rebecca says:

    Yes, text ONLY editing, please.

    Also would like the client to be able to drag and drop to rearrange paragraphs and headers on the page. Or, up and down arrows next to the Edit button to move content pieces up and down.

    Basically, I don’t trust them to format the text properly, so I need to give them simple content blocks that they can edit but also rearrange their order.

    Thanks!

  5. Emil says:

    You can give “repeating regions” a shot. Just add “cms-repeat” to any collection of tags, and you’ll be able to re-order them with arrows up+down.

  6. Megan says:

    I would like to see text only areas too!! I have areas that I do not want my client re-formatting!! I have styles defined and inevitably they will create an awful color/size/font combo with the WYSIWYG features… of course, other areas I want them to be able to have full control over…

    Perhaps we can have a “cms-editable-simple-text” or something like that… it’s just a plain little box to change just the words :)

  7. Emil says:

    Add it to pagelime.uservoice.com so we can get folks to vote on it!

Leave a Reply