Quick Tip: WordPress Visual Editor Button Icons

The process of adding a new button to the WordPress visual editor is fairly simple; as long as you understand how to develop a new TinyMCE plugin (which is a somewhat involved and laborious process that I will probably cover at another time).

One thing I discovered yesterday, though, is that one line of code makes the difference between the Visual Editor using a custom, static image as the button and the Visual Editor using a span that you can stylize with CSS (to fit better with the native Visual Editor appearance).

WordPress: Adding a Proper Visual Editor to Your Plugin

When developing a new plugin for WordPress, sometimes you want to add a visual/WYSIWYG editor to one of your plugin’s settings fields. Unfortunately, most of the tutorials you’ll find online only explain part of what needs to be done in order to get that working. The main problem I have encountered when looking at these tutorials and example plugins is the fact that they only invoke the visual editor; they don’t offer any way for the user to use the editor in HTML mode.

A New Alternative to TinyMCE

I came across a post on the Web Resources Depot today referring to a new (to me, at least) WYSIWYG editor similar to TinyMCE. However, this new editor, known as MooEditable, uses the MooTools javascript framework rather than implementing everything with its own libraries and frameworks. It appears to be lighter weight than the full TinyMCE package, but I’m not sure how it compares in functionality.

If you’ve tried MooEditable, please let me know what you think. What are your experiences? How does it stack up against TinyMCE?

TinyMCE 3.2.4 Released

The folks over at TinyMCE are still plugging away on the best WYSIWYG editor available. Another new release came out yesterday.

This new version includes some bug fixes and apparently a lot of new features for the paste function.

I found the bug fix mentioned in the quote below very interesting. I will have to test it out when I return to work next week to see if this allows TinyMCE to work on the iPhone. I doubt it will, but it’s definitely worth testing.

“We also fixed a somewhat critical bug where some WebKit versions would fail with a DOM Range exception due to a WebKit bug. We added a workaround for this one and reported the bug to the WebKit team.”

If you get a chance to test the new version before I do, let me know what you find.

Javascript and Screen Sizes

With mobile browsers becoming more and more prevalent, it becomes more and more necessary to develop a version of your Web site for those browsers. There are a lot of scripts out there that are designed to detect mobile browsers, but many of them need to be updated every time a new mobile browser is developed.

A quick and easy way to detect mobile browsers is to detect the users’ display resolutions. Certainly, this is far from flawless, but it’s not a bad method. Assuming that the browser supports javascript, you can easily figure out the users’ resolutions by using the screen.width and screen.height properties. You can fairly safely assume that most users with a screen width of less than 600 pixels is viewing your site with a handheld of some sort. Therefore, you should use the following javascript to perform any special actions that need to be taken when being viewed with a handheld.

<script type="text/javascript">
if(screen.width <= 600) {
mobileSite();
}
</script>

In my case, I’m using a similar script to determine whether or not TinyMCE should be initiated or not. My TinyMCE init script looks like:

<script type="text/javascript">
if(screen.width>600) {
tinyMCE.init();
}
</script>

I hope that helps some people.

Manage Files Within Facebook

While developing a new content management system, I was looking for a good file manager to use in conjunction with TinyMCE. After some searching, I came across PHPfileNavigator. I really like the simplicity and power of the application.

I am once again working on a new Web-based project, and went to the PHPfileNavigator Web site to download the app again and to check the news. While doing so, I noticed that PHPfileNavigator is now available as a Facebook app. You can add PHPfileNavigator to your Facebook profile and then use the app to upload and organize files.