TinyMCE is a great WYSIWYG editor, but sometimes there are cases where it removes HTML tags when you go into the “HTML Source” mode and switch back to the editor. This is very frustrating to end-users.

By default, TinyMCE will remove a lot of HTML tags including empty ones (such has having a DIV spacer), select options, certain styles, etc. To get around this, you will need to change the option “extended_valid_elements”, which is before the setup : function(ed) line. Note: This will allow your users to add in any kind of HTML tags they want. Replace the “extended_valid_elements” line with:

valid_elements : "*[*]",
extended_valid_elements : "*[*]",

This will fix the problem with TinyMCE removing tags from the HTML Source mode.

 
I attended WordCamp SF for the first time in 2009. There was some exciting news at the camp, especially with the news that WordPress MU functionality is going to get integrated with WordPress. This will be nice considering updates for WordPress MU are usually a month or so behind. What will this mean? Hopefully, it will bring a larger community in maintaining and adding new plugins for WordPress (MU).  The question will be whether it will be easy to convert an existing WordPress MU install over to the new WordPress. (Possibly WordPress 3.0?)

Highlights of the conference:
Timothy Ferriss, nominated as one of Fast Company’s “Most Innovative Business People of 2007,” is an angel investor and author of the #1 New York Times, Wall Street Journal, and BusinessWeek bestseller, The 4-Hour Workweek, which has been sold into 35 languages. He had a lot of good points on tweaking blogs to reach a larger audience.

WordPress gear! I plan on sending out some stickers and buttons I got at the conference.. stay tuned.

BuddyPress There’s a lot of potential with the community aspect of blogs. I’m hoping this functionality will be integrated with WordPress MU.

Community Speakers and Authors: http://2009.sf.wordcamp.org/speakers/#chris Chris Pirillo is an excellent speaker, had a lot of interesting points about the importance of the community.

http://2009.sf.wordcamp.org/speakers/#tara Tara Hunt’s book about the value of building community vs. buying a community.

http://2009.sf.wordcamp.org/speakers/#cali Cali Lewis (GeekBrief.TV) talked about building an interactive audience. Learned a lot about the challenges of video vs. audio cast.

Last but not least, the community! It was great meeting everyone at the after party.

More info about the upcoming merge with WordPress MU and WordPress (see the comments below the post)
http://technosailor.com/2009/05/30/wordcamp-sf-announcement-wordpress-and-wordpress-mu-to-merge/

I have found a really useful plugin in Wordpress MU for making a blog private. Sometimes, committees need a way to share information away from home and they don’t want everything posted to be known by the world. Rather than using the “Password protect post” option, there is a way to only allow registered users that are members of the blog to view the post.

By default, the privacy options in Wordpress MU is limited to 1) Public, allow search engines 2) Public, don’t allow search engines.

http://wpmudev.org/project/More-Privacy-Options

This plugin adds functionality:
3) I would like my blog to be visible only to registered users from blog community
4) I would like my blog to be visible to registered members of this blog
5) I would like my blog to be visible only to administrators

To install:
1) Download the plugin file.
2) Copy the plugin file to the plugin folder in Wordpress MU
3) In the Plugin interface in Wordpress MU, activate the “More Privacy Options” Plugin
4) In the Privacy option of the blog (under Settings -> Privacy) you will have the additional privacy options. Select the “I would like my blog to be visible to registered members of this blog
I would like my blog to be visible to registered members of this blog” option.
5) Note: AFAIK, this is on a site by site basis, so will need to enable this plugin for each blog you want to add it to.

Update 4/28/2010:
If you upgrade WordPress MU to a newer version, you will need to set the “Privacy Settings” again. Occasionally, the WordPress upgrade will reset the privacy settings back to default.

Getting Tiny MCE to work with forms is a challenge since it can place end form tags within the page and rename your form elements. Although they do not recommend using forms inside the editor, it can be done by some workarounds. I’ve put some common issues with forms with Tiny MCE and the workaround.

The <form name=”[OBJECT"]> bug
For instance, input fields CANNOT be named “name” (so use other identifiers for the first and last name) and ids CANNOT be named “id”. Otherwise, you will have a form element that will have a field called “<form name=”[OBJECT]“> or <form id=”[OBJECT]“>

Early </form> tags getting added in the form
Another limitation is placing <p> tags within the form. This somehow causes TinyMCE to create </form> tags after the </p> field.

If you find certain form elements getting deleted, you will need to use the extended_valid_elements variable in the configuration. 

For instance,
extended_valid_elements : “form[*],input[*],textarea[cols|rows]“,

In order to make icons wider in TinyMCE, you will need to remove the default width on the mceIcon class. Its forced at 20px, which limits all icons to be square.

To make the change, go to your ui.css file
For advanced theme users, its located in themes/advanced/skils/default/ui.css

In Version 3.2.2.1, its line 30:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}

The line should be changed to:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}


Next, you will need to define your custom button when initializing TinyMCE.
Using the example:
setup : function(ed) {
// Add a custom button
ed.addButton('mycustombutton', {
title : 'My custom button',
image : 'img/[Filename of custom button]',
onclick : function() {
ed.selection.setContent('<strong>Hello world!</strong>');
}
});


Add the button to the menubar, which is in the section defined with “theme_advanced_buttons…”
For my example, I will need to append “mycustombutton,” to it

You will then need edit the ui.css file with the wider button. For simplicity, add it to the end of the ui.css file so you can easily copy it when a new version of Tiny MCE is released. Replace the boldface “mycustombutton” with the name of your button. If you button name is mrfancypants, then it will be .defaultSkin a.mce_mrfancypants

/* Custom button */
.defaultSkin a.mce_mycustombutton {
width: 65px;
}


That should be it! I plan on adding a lot more TinyMCE tutorials since I’ve decided to change the WYSIWYG component on all my applications to TinyMCE. CSS works really well with TinyMCE and cross platform browsers.