So I’m working on a new plugin and it needs a custom form to collect and save settings. It has a couple of textareas so I’m thinking “how cool will it be to add tinyMCE to the textareas? People will love it.” Visual editing, no coding knowledge required.
It was pretty easy to add tinyMCE to the form. I stopped by the codex and found the wp_editor function. This was too easy. I gave it a name, added the variable with the content and pressed save. I reloaded the page and tada! There it was. I had the visual editor on my form the first try!
Ok, so by now I’m thinking I’m God of the internet. Then I loaded my carefully crafted post. Hey all looked good. “I think I’ll just press save and see what happens”
This would be the point where the shit actually hit the fan…
All my styles style=" " all my paragraphs <p></p> and all my line breaks <br /> were gone. What a mess! Here’s the part that did work. My form worked like a charm and happily saved all the screwed up code! As luck would have it, I always, always backup and I thank God for that.
So off I go to Google and the forums in search of answers. Ok, so it wasn’t just me. Everybody is bitchin. If I had only read Customize_TinyMCE_with_Filters first.
I did however finally get it working and here is what I’ve found:
- You’re gonna need a good stripper!
When adding the value to your form use stripslashes. tinyMCE is gonna add slashes so before you display the form value you’re going to need to remove them.
So instead of:
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>
You need to do:
<?php wp_editor( stripslashes($content), $editor_id, $settings = array() ); ?>
Reloaded my default settings and like magic all my styles were back and I didn’t lose them when saving.
- About that paragraph , <p> Thing.
Just don’t. Make it a division, <div> instead. You will save yourself so much stress. You can use a <span> inside a division as well and you won’t lose your changes. One more thing about using the <p> tag, Just don’t…
Sorry, with the default settings it’s not gonna happen and it’s not worth the aggravation.
Just use <div style="display:block;"> instead. You can also do it with a <span> . And css margins are your friend.
In the end the editor is working well. I did jump over to the html side a couple of times while writing this post but 98% was done on the visual side. I think it’s important to get it working because not everyone who uses it on your site is going to be a programmer.
That’s it for now, my brain is tired. See you next time.
Ray