I threw a little something together today to add WYSIWYG editing to BuddyPress, using TinyMCE. I want to be careful about the tags I allow, so I’m whitelisting, which is a bit tedious. As a result, there are only a few buttons available: a, em, strong, ul, ol, li. It’s a start, though.
Seems to work everywhere in BP: forums, wire, messages, profile pages.
A note about TinyMCE: WP ships with TinyMCE, and I thought it made sense to use that version instead of attaching one to this plugin. I think that the path to TinyMCE (line 20 of the plugin) should work on all installations, but you may have to tinker if you don’t see it popping up in the head of your BP pages. Moreover, the language files for WP’s version of TinyMCE are misnamed, which means that they don’t work right out of the box (at least for me they don’t). You may need to change the name of wp-includes/js/tinymce/langs/wp-langs-en.php to en.php in order to get the hover and help text in the TinyMCE box to work.
Download the plugin here. Don’t use in a production environment unless you are very certain that you are satisfied with the security of this plugin!
Pingback: Teleogistic / TinyMCE in Buddypress | WordPress News
RT @boonebgorges: New blog post: TinyMCE in Buddypress http://teleogistic.net/2009/12/tinymce-in-buddypress/
RT @boonebgorges: New blog post: TinyMCE in Buddypress http://teleogistic.net/2009/12/tinymce-in-buddypress/
RT @boonebgorges: New blog post: TinyMCE in Buddypress http://teleogistic.net/2009/12/tinymce-in-buddypress/
TinyMCE in Buddypress http://teleogistic.net/2009/12/tinymce-in-buddypress/ /via @boonebgorges
Hi, I just began using your plugin here and it seems to be working fine except for the forums.
For example, when I go to a member’s page it appears fine. But when I use it in a forum post such as here instead of formatting it just displays the HTML tags.
I’m using WPMU 2.8.6 and BP 1.1.3
Thanks,
Paul 🙂
Thanks for this plugin.
Works fine on profile. However, in forums, can’t insert a link. The url points out to the title instead. In the link editor, the strings are not correct (for example I get {#insert} instead of Insert). Probably a locale issue.
I did not see anything on line 18. I do see line 16/17 with
function bp_tinymce_add_js() {
global $bp;
and 19 for if ( $bp->current_action == ‘forum’ |…..
Where is the path for bp-tinymce.php on line 18? It doesnt work for me at all.
Jed, you’re right – it’s line 20 (I must have been looking at an earlier version). The plugin assumes that you’ve got TinyMCE installed at http://example.com/wp-includes/js/tinymce/tiny_mce.js. If you find that you don’t have it installed there, download the most recent version of TinyMCE and either put it in the directory just mentioned (http://example.com/wp-includes/js/tinymce, assuming that http://example.com is where BuddyPress is installed) or upload it somewhere else and edit line 20 to point to the correct location.
Fairweb – The second issue you mention (#insert, etc) is indeed a locale issue. That’s why I mention that you might have to rename the locale file for English wp-langs-en.php to en.php. Seems to be a problem with WP and its install of TinyMCE, not with my plugin.
As for the first issue: I’m not sure. It could have something to do with the fact that I haven’t whitelisted title attributes on anchor tags. I will play with it over the next few days and see if I can reproduce the problem. In the meantime, try skipping the title box in TinyMCE (leave it blank) and see if links work.
Hi Paul. Hm, your setup is the same as mine, but I haven’t had the problem that you’ve had. I’ll get a chance in the next few days to look at the forum filters to try to reproduce the problem. In the meantime, you might try taking a look at the filters in buddypress/bp-forums/bp-forums-filters.php (I think that’s it – I’m going from memory!) and try commenting them out selectively. If you find the filter that’s causing the problem, at least it’ll act as a starting point for solving the problem.
Fairweb – I found the problem. It was my fault – had to do with a silly preg_replace. Should be fixed now in the trunk version. Download the plugin again from the WP repo and see if link titles work correctly.
For some reason target attributes aren’t showing up – even if you select a target in the TinyMCE editor, it doesn’t come through. It must be getting stripped elsewhere by BP or WP. Titles should work now, though.
Excellent plugin. Thanks. One problem I have on my site. I have an extra field “About me” on the base profile settings where members can add information about themselves. When updated with your plugin, the first few words (1-2) is inserted with a link and then the next words of the sentence follows.
Hi AntonRSA. Glad the plugin is useful for you. I’m not exactly sure what you mean by your “About Me” problem. Do you have a link or a screenshot?
Boone, did you test your plugin with BP 1.2 Default theme on latest trunk of WPMU 2.9 RC1 ? It doesnt even work at all with Firefox, Safari and Chrome for Mac so far.
Hi Jed. I didn’t really even look at how it worked with BP 1.2 until today. Are your symptoms like what Ted describes here? http://dev.commons.gc.cuny.edu/2009/12/20/new-buddypress-plugin-bp-tinymce/#comments If so you might want to try the most recent version of the plugin (0.2) to see whether the problems have been fixed.
I should note that I did all my testing on BP 1.2 with the bp-classic theme, and I’m pretty sure it works there. On a lark I decided to switch on bp-default, and nothing is working. But by “nothing” I mean “nothing at all” – bp-default is totally messed up in every way I can think of. It probably means that i have a plugin conflict on my end, or that my installation of BP is messed up in some way. As for TinyMCE, for instance, all of the textares in bp-default are being correctly converted to TinyMCE boxes, but they are weirdly narrow and I get a “Please enter some content” warning when I try to post.
As BP 1.2 comes closer to being released I will pay closer attention to how this plugin works.
Hi Boone, thanks for the feedback. I upgraded to your plugin version 0.2 and it still seems to work fine for profiles but not for the forums. So for right now we disabled the forums.
I don’t know if this should affect anything or not but in the plugin file I set “Site Wide Only: false” instead of true. I’m only running the plugin on the main site and not on any of the blogs.
I guess while I’m at it I’ll go ahead and list the other abnormalities while running this with the BP 1.1.3 bp-default theme:
1. Bulleting and numbering doesn’t create bullets/numbers or indent. This is probably a css issue on my part and not a problem on your part.
2. When I try to insert a link this is what’s listed in the pop-up
============
* {#advanced_dlg.link_title}
{#advanced_dlg.link_url} [then the field with “http://” inside it]
{#advanced_dlg.link_target} [then the field with 3 options inside it, “{#not_set}”, “{#advanced_dlg.link_target_same}”, and “{#advanced_dlg.link_target_blank}”]
{#advanced_dlg.link_titlefield} [then the field with nothing inside it]
============
Anyways, I think it’s a great plugin and I can’t wait when the bugs are all out. Thanks for your time. Keep it up and Happy New Year!
-Paul
Hi Boone, I upgraded to version 0.2 and the problem went away.
Hi Paul,
Thanks for the kind words! Happy new year to you as well!
Problem (1): You’ll be able to test whether it’s a styling issue by right clicking on the output and choosing “view source”. If you see ol, ul, and li tags there, then you know that it’s a CSS problem. If not (if they’re just paragraphs or whatever), let me know and we can troubleshoot further.
Problem (2): The weird text you’re seeing is due to the localization issue I mention in the original post. Try changing the file in tinymce/langs/wp-langs-en.php to en.php and see if the weird # text changes to proper English.
As for the forum issue: I am a bit at a loss. Check a few places for me: When you view the source of the forum output, do you see the proper markup (em, strong, etc?) Do you have access to the database itself? Look in wp_bb_posts (or whatever your post table is called) and see if the tags are saved in the post body. This’ll help to narrow down where the tags are getting stripped.
Not sure what you mean by “disabled the forums”, but until the problem is solved you can keep the TinyMCE box from appearing on forum pages by deleting
$bp->current_action == 'forum' ||from the conditional statement around line 18 of the plugin file. No need to disable the forums altogether 🙂AntonRSA – Awesome! I think I know what the problem was (it was related to the issue I mention in comment 7 to this post). Anyway, glad it works.
it’s doing it again. Have a look at this page: http://socialpress.co.za/members/anton/
Anywhere where there’s a multi line text box on your profile (About me) it makes the first few words links and then it starts on a new line.
Hi AntonRSA – Thanks for the link. I can see now what’s happening. I’m 99% sure that it has nothing to do with my plugin. BuddyPress automatically creates search links within long profile fields, based on things that look like lists. So when you separate thing with commas at the beginning of your “About Me” section, BP thinks that they’re list items and links them to searches.
There are a few ways to turn this off. Perhaps the best (though I admit I am biased!) is to use this plugin I wrote: http://wordpress.org/extend/plugins/custom-profile-filters-for-buddypress/. This allows users to override BP’s automatic linking. Say you wanted each of your “titles” linked. With the plugin, you’d write the following:
If you didn’t want anything linked at all, you could put some dummy brackets at the beginning to turn off filtering:
There are other ways you could make it work, by finding the appropriate filters in BP and editing them or removing them. But this method works without touching code.
Thanks Boone. Installed the plugin and it works if I insert [] in front of the text so that it’s not linkable.
If I don’t include [] at the start, It doesn’t display “I am a blogger….” but “blogger” instead. It leaves out “I am a”. Hope you understand.
AntonRSA – Weird – I have no idea why it would do that. If the plugin finds no brackets in the field, it ignores it altogether and lets the default BP filters kick in. So without any brackets, you should see the exact same behavior that you saw before installing my plugin.
Something for me to look at sometime soon, I guess.
Hi…
I installed your plugin, but it doesn’t work correctly…
The link, bullet list and number list doesn’t work at all…
The bullet and number list when I post the message… nothing happens…
The link… opens a pop up window and it shows like this:
* {#advanced_dlg.link_title}
{#advanced_dlg.link_url} [http://]
{#advanced_dlg.link_target} [3 options]
{#not_set}
{#advanced_dlg.link_target_same}
{#advanced_dlg.link_target_blank}
{#advanced_dlg.link_titlefield} [blank]
but when you put insert… nothing happens…
If users are concerned about allowing links in comments, it’s easy enough to edit the plugin to remove that option. On line 22 of the php file, it says:
theme_advanced_buttons1 : “bold,italic,bullist,numlist,blockquote,link,unlink”
I just removed link,unlink and those buttons no longer appear.
I tried adding html to my comment after making this change, and the link code appeared as regular text. To be on the safe side, I also commented out lines 46-50, which specifies $allowedtags[‘a’]–that is, the tags related to links.
Great tips, Dan!
Priscila – The second problem (the funny # text in the popup) has to do with the language file. As I state in the post, make sure your wp-langs-en.php file is renamed to en.php.
The first problem is a bit trickier to diagnose from a distance. When you view the source of the site, do you see ul, ol, and li tags? If so, then you’re looking at a CSS issue.
I missed the readme that said to rename wp-langs-en.js when I first installed this, so I was getting error messages. When I changed the name to en.js as suggested, the error message stating that bp-tinymce couldn’t find en.js stopped, but then the tinymce interface for my posts and pages was wonky, with code showing up where interface labels should have been. I checked the error logs, and discovered that now tinymce was looking for the originally named file.
I duplicated en.js, named the duplicate wp-langs-en.js, and both files are in wp-includes/js/tinymce/langs/. Both tinymce and bp-tinymce are happy, and the error messages have stopped. I’ll check my error logs again periodically to make sure there isn’t some unintended consequence, but so far this looks like the solution.
Dan – That’s really interesting. What version of WP are you running? Sounds like there are quite a few problems with the way that WP’s TinyMCE is configured. If I were smart enough I would submit a patch 🙂 Anyway, nice work, and thanks for leaving the wisdom here for others to find.
Boone, Glad to be of help–and very glad to have the plugin!
I’m running wpmu 2.8.6 and buddypress 1.1.3–the lastest stable versions.
And, are you aware that this plugin also works on blog comments? You say above it works on all the buddypress functions (wire, etc.), but it’s also working on the comment boxes on all my blogs.
Installation: WP9.1 (not MU), BP1.2
I installed v.2.1 today and it didn’t work, originally. After I modified the WPINC directory per the directions on Line 20, the tinymce posted properly in IE but not Chrome. In IE, I could type in text and use the tools to make bold, etc. but when I hit the post button, the response was “Add text to post” as if I hadn’t typed anything at all. Then, the toolbar disappeared altogether, even with my modifications and activating/deactivating the plugin.
This seems to be a work in progress and one that I have looked forward to. Thank you for getting us this far.
Best regards,
MB
Dan – I hadn’t noticed that it worked for blog comments too until you mentioned it. Bonus!
Michael – Yes, it is a work in progress, as indicated by version number 0.21. The “Add text to post” error is mostly likely showing up in places where you’re trying to post via AJAX, such as on the activity stream (as opposed to the forums). I have included code that works around the problem in at least some setups, but BP 1.2 is still unreleased, and so it’s likely that recent changes in the trunk version have broken my modifications. Once BP 1.2 is itself no longer a work in progress, I will do what’s necessary to get the plugin running in that environment too.
Thank you for getting back so quickly. I’m on the same page and hopefully my comment was seen as an FYI, especially since 1.2 is in trunk and this is version .21. I’m looking forward to things to come!
Hi Boone,
When I went to edit the name of the php file in wp-includes/js/tinymce/langs/ there was no file named “wp-langs-en.php” only one named “wp-langs.php”. However, there was a .js file named “wp-langs-en.js” so I changed that to “en.js” and the locale issue now seems to be fixed.
I haven’t tried the forum thing since I didn’t really need to have it, but if/when I reactivate it I’ll let you know.
Thanks a million and I’m looking forward to your other work.
-Paul
When I add forums using the editor it adds new blank lines between paragraphs. I’ve tried everything but the problem still persists. Have a look at this page: http://socialpress.co.za/groups/pro-bloggers-lounge/forum/topic/popular-blogging-myths
Anton – Hm, I’m not sure where the <br> tags are coming from. Try commenting out the line
$allowedtags['br'] = array();(around 59) and see if the problem persists.Thanks. Will try commenting out the lines. Seems like i’m bugging you the whole time 🙂
This is the text in the editor “Start writing a short message…” but when I click on it, the onfocus property doesn’t get called.
<textarea name="wire-post-textarea" id="wire-post-textarea" onfocus="if (this.value == '’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ”;}”>
When you click on the textarea, the text still displays. It doesn’t dissapear.
I’ve noticed the same problem with the “Start writing…” text. I assumed it was a TinyMCE bug. I will look to see if I can fix it, though I dont’ know if I have the javascript chops 🙂
Boone, I discovered yesterday that this plugin somehow blocks input in comment replies. So, I can type in a new comment box and use the TinyMCE features of the plugin. But, when I click reply in threaded comments, the comment box shows up with the TinyMCE buttons, but there’s no way to get the cursor in the textbox. When I disabled the plugin, the reply box worked.
Any thoughts on what the issue might be?
I have the same problem as Priscilla. The editor doesn’t seem to save tags. I looked at the source and those elements are not visible.
A list is saved like this
It establishes your credibility
Builds and maintains customer relationships
Also the paragraphs are saved like this
Newsletters play an important role in relationship…..
it saves two paragraph elements before each paragraph.
Anton – Is this true across all components? Wire posts, forums, messages?
Dan – What do you mean by comment replies? On blogs? Or in activity streams? If you mean blogs, is it only with threaded comments?
Thanks for the reply. yes it’s accross Wire posts, forums, messages
Anton – Can you check your database to see if the li tags etc are getting saved there? I’ll help to narrow down the problem if I know there’s getting stripped on the way out vs the way in.
Boone, Yes, comments on blogs–and only threaded (that I know of–I haven’t tried it with unthreaded comments). You can try for yourself here: http://mubox.dandoesenglish.com/test/2010/01/14/hello-world/comment-page-1/#section-comments
It gets saved correctly in the database so it’s not displaying correctly.
In Firefox, when you highlight code and click on the link button, the text you have highlighted loses focus in about 1-2 seconds time so when you click insert link, it can’t add the link because there’s no text linkable selected. I’ve tested in IE 8 and it seems to work then.
Anton – Are you by any chance running BP 1.2 trunk? I see that some new filters have been added, which might be what’s causing the problem. Try adding
add_filter( 'bp_get_activity_parent_content', 'bp_tinymce_allowed_tags', 2 );
to the end of the plugin and see what happens.Anton, your second point (about Firefox) sounds like a TinyMCE problem. I’ll check it, but there’s probably not much I can do with it, knowing as little about TinyMCE as I do. At some point I might replace TinyMCE in this plugin with a different WYSIWYG JS framework, one that works a little bit more reliably.
Dan – The test blog you set up must have been deleted – I wasn’t able to get to it.
I’m not sure exactly what’s up with the comments thing. I actually disabled the plugin on blog comments for a different reason – it was screwing up new comment email notification. Just delete or comments out
|| $bp->current_component == $bp->profile->slugin the if-statement around line 18 of the plugin. This might also stop TinyMCE from working on profile wires, but I haven’t had a chance to figure out the correct logic for that yet.Boone, sorry about the broken link. My hosting service moved my sites to a new server over the weekend and somehow that one test blog got screwed up. I’ll play with the plugin some more and try commenting out the lines you suggest.
I’m using bp 1.1.3
Should I still add the filter
add_filter( ‘bp_get_activity_parent_content’, ‘bp_tinymce_allowed_tags’, 2 );
lol – panic, panic, panic
I tried to deactivate the plugin but it seems that everywhere where forum topics were made using the editor, the html tags now show.
If I deactivate the plugin – is there anyway that I can configure it so that the forum posts doesn’t display html tags anymore or is this a manual thing?
Anton – At some point, did you turn off some of the default filters? Look in bp-activity/bp-activity-filters.php, bp-forums/bp-forums-filters.php, etc and see if you commented anything out. In each of those files there should be a line that hooks
wp_filter_ksesto something along the lines of bp_get_the_activity_content. I’m pretty sure it’s that filter that removes HTML tags. You might compare those files to fresh versions downloaded from wordpress.org/plugins.Worst case scenario: You can hook the function wp_filter_nohtml_kses to any of the get events, eg
add_filter( 'bp_get_the_activity_content', 'wp_filter_nohtml_kses', 10, 1 );. You definitely should not have to go through and remove HTML tags one by one!Boone, after I disabled your plugin, I tried MCEcomment (Visit plugin site), which adds TinyMCE to comments only; it didn’t work at all (and had worked previously). So, I’m thinking that there’s some other plugin I’ve added that’s conflicting with both of these. I’m going to try BP TinyMCE on a clean install with no other plugins to see what happens and let you know.