The Switch to TinyMCE

To put it bluntly our content editor is junk. There really are almost no options and you can’t style any CSS unless you know CSS. About the only thing that is has going for it is the fact that you can make links to existing pages within the websites pretty easily, and it creates new pages that way. I am considering making the switch to a more mainstream WYSIWYG editor called TinyMCE.

What is TinyMCE

TinyMCE is a very popular editor, if not the most popular and has tons of customization options as well as extensibility. You can see this editor and even mess around with it on the TinyMCE website.  Don’t be afraid by the sheer number of buttons, a lot of them will be hidden because we won’t use them. We don’t have to make the switch, so I am asking for your input. Go to the site and mess around with it and see if you like it, and then let me know. I will tell you one “bad” thing about it. If we switch it will most likely take me some time to get it so you can add links the same way we can now.

You will still be able to add new pages from the left menu or other menus, but from TinyMCE you will only be able to add links, not actually “new pages” if that makes sense. I will add the functionality later, but from the get go it will not be there.

Things to Try Out

On the demo page there are some features that I would like to point out that really showcase some of the extra functionality that you will get if we make the switch.

Link Button

The link  button has a bit more functionality than the one we currently use. Our link button currently has options for new page, existing page, file and video. TinyMCE puts video on a different button, and files we will have to do using a different method for a bit. However for existing page, I can set it up to show existing pages on the site and those will show up in the “Link List” drop down as shown below. The “Target” determines if this will open in a new/existing tab/window. The “Title” will be what pops up when someone hovers over the link, and the class has to do with what I spoke about in another post. We could in theory set up some custom classes for links to change their colors, sizes, or even make them appear as buttons.

Also, if you re-select a link, you can go back in and edit the existing link, or hit the de-link button to remove the link from the selected text.

Insert Image

The insert image buttons has a lot more options than we currently have. As seen below, you can enter in an image URL for the image, or select from a list of images. This is great because you can select from already uploaded images. You can even preview that those are.  The appearance tab has other options for sizing and aligning the image as well as adding a class again. You can also add some styles right in the window. As with most other features in TinyMCE, just click on the image after it as been inserted, then click on the image button again and you can edit any properties that you previously setup.

Remove Formatting

The remove formatting button removes any style formatting that you may have added to any elements in the content window. It applies to fonts, colors, backgrounds, etc. It’s REALLY nice when you want to paste in content from an outside source and you get a bunch of funky formatting that you really don’t want. Just paste in your content and then select it and hit remove formatting and then add your own.

Insert Media

The insert media button is nice because it allows you to insert any type of media, not just YouTube videos. In theory we could upload an audio or video file and this TinyMCE editor automatically can allow you to embed that audio in the webpage using a number of different methods. It also automatically recognizes common sites such as YouTube and uses the appropriate settings for embedding it in the page.

Style Editor

The style editor is probably my most favorite feature of this editor. It gives you access to the full gauntlet of CSS styling options but you don’t need to know how to write out the CSS code. Everything is available in easy to use drop-down/input form fields. You can edit just about any style for your content all from the editor. If you want to make any tweaks you can always go into the HTML view for editing specific HTML stuff. In addition there is a full screen mode which is nice as well as a preview button so you can make sure everything is as it should be.

Check It Out

Play with the editor a few times over the next week or so and see if you like it. Like I said, we will get rid of a lot of the buttons that we most likely won’t use. I will make sure that before I implement it the ability to add new pages, upload files, etc will be there, but before I spend the time throwing it on the site, I would like to know if it something that you would like. It wouldn’t be a ton of work to add it in, but it would take some time.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: