BP TinyMCE

This plugin allows you to include a TinyMCE rich editing box on many of the pages of BuddyPress. 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!

Update, March 13 2010: I’ve tweaked the plugin so that it should work with ajax status updates in BP 1.2.1+. Download it here, but keep in mind it’s not really an official release – just a stopgap til I can find time to make it work right.

BP TinyMCE has been downloaded [downloadstat url=”http://wordpress.org/extend/plugins/bp-tinymce/stats/” get=”total” autop=”false”] times. Are you using this plugin? Consider a donation.

See an older comment stream related to this plugin. All future comments should be left on this post.

Version history

0.1
Initial release

0.2
Compatibility with “what’s new” box on group home pages in BP 1.2
0.2.1 – – January 7, 2010
Fixed problem with a target attribute

58 thoughts on “BP TinyMCE

  1. stavrosthewonderchicken

    Hey Boone — been messing around with this trying to get it working consistently on BP1.2. It appears in some places and not in others, which is making my head hurt (and sadly, breaks the Rate Forum Posts plugin, which I really like too).

    Any chance you could take some time out of your madcap BP-plugin-releasing schedule to revisit it for 1.2? A lot of us (I’m guessing, it can’t only be me!) would really appreciate it!

    Reply
  2. Boone Gorges Post author

    stwc (and now I know what it stands for!!) – I have been putting this task off because TinyMCE is such a PITA. I know that people are clamoring for it, though, so I’ll take a swing at updating this bad boy this week. Thanks for your interest.

    Reply
  3. Boone Gorges Post author

    For those following this discussion: I just posted a zip file of a version that is pretty much working on BP 1.2 bp-default. Haven’t done a lot of testing, so use at your own risk. Not going to put it in the repo until I have time to test, which might be a while.

    Reply
  4. Leonardo

    Hi Boone,

    I have been trying to add the IMG tag to the available buttons. I already searched through the comments and event tryed editing the code in the bp-tinymce/bp-tinymce.php file.

    I think I understand where the html filter is, but I can’t find a way to remove the img tag from it.

    I thought i could do it modifying the A HREF one, as it is a double tag, but, couldnt get it to work.

    Could you please indicate what I have to do to enable the IMG tag? Thanks in advance!

    Reply
  5. Boone Gorges Post author

    Hi Leonardo,

    Sure, you can add an IMG tag easily. In bp-tinymce.php, find the long echo statement on line 22 (beginning “TinyMCE.init”). Find the attribute theme_advanced_buttons1 and add “image” to the end, so it reads “bold,italic,bullist,numlist,blockquote,link,unlink,image”. You shouldn’t have to add <img> as a supported tag on the output end, since recent versions of BP already support the display of inline images in activity stream items.

    Keep in mind that it will only add an image button, which allows for the embedding of images that have already been uploaded. In other words, people won’t be able to upload images through this interface, at least not right off the bat. I know that there are some image upload plugins for TinyMCE out there, and there’s no reason why they shouldn’t work with this plugin, though I have not tried any of them myself. If you manage to make one of them work, please report back here – I would be very interested in hearing about it!

    Reply
  6. Leonardo

    Boone,

    Thanks a lot for the answer. I can’t believe I was so close, and didn’t think of that!

    I was adding “img” to the end. If I had seen (as in payed attention) the other tags were full words instead of the tag, and I might have tried that.

    I will look into the upload feature, as I think it would be useful. If I do, and I’m successful, will post back about it.

    Thanks again, for the plugin and your time.

    Reply
  7. Ipstenu

    Wow! This is great (my users were very happy to see something ‘intuitive’ ). It’d be nice if it showed up for everything on the site, blog comments as well as the BuddyPress stuff :)

    Reply
  8. marcella

    Hey Boone,

    I’m wondering here about your plugin, had looked at this before after a recomendation. However when you say you are whitelisting what exactly do you mean by that? I’ve integrated jWysiwyg on text areas. It has a low footprint and doesn’t do much damage on that side. As soon as you switch the plugin on, and submit data through any BP area it gets submitted to the DB successfully. All tags allowed. h1 to h6, em, strike through, alignment, underline, bold, hyperlinks, image references and so on. So it’s stored nice and fine. The biggest problem is getting it back from BP / WP in an unfiltered way.

    /bp-forums/bp-forums-templatetags.php
    Line 847.
    return apply_filters( ‘bp_get_the_topic_post_content’, stripslashes( $topic_template->post->post_text ) )

    to

    return apply_filters( ”, stripslashes( $topic_template->post->post_text ) )

    allows output where any calls on bp_the_topic_post_content() are made.

    not sure of the entire implications of clearing these filters.

    so it seems as though you can use any wysiwyg in WP / BP when submitting data but getting back out is the problem, are there anyways to apply your own filters to these tags without manipulating the core of BP?

    thanks

    Reply
  9. Boone Gorges Post author

    Hi marcella –

    Thanks for stopping by. FWIW I think that jwysiwyg is really nice, and when I finally get around to playing with this plugin again, I will definitely ditch tinymce in favor of that.

    When I say “whitelist” I mean that I’m defining the tags that can be saved to the db, as well as the tags that can make it through the display filters. You can see how I did this by looking in the plugin files. The tricky part is that the method is inconsistent between different kinds of content – forum content in particular is handled differently.

    If you want to remove the core tag filters altogether, you can do so. The method will be slightly different for different kinds of content, but here’s the idea. Go into the filter files, eg bp-activity/bp-activity-filters.php. See how a bunch of filters are being added? Find the ones related to content (ie hooked to bp_get_activity_content). Comment them out one by one until you find the one that is stripping tags (I think it’s the kses one at the top). Once you’ve found it, copy that whole line (starting with add_filter) to your plugins/bp-custom.php file, and change add_action to remove_action.

    The implications? I think there are some security issues regarding the possibility of allowing through some malicious javascript or something.

    Reply
  10. marcella

    Thanks Boone, that answered pretty much everything.

    jWysiwyg is nice as with TinyMCE but seeing as TinyMCE look for licensing now with file upload and whatnot it’s not ideal for a plugin.

    There are plenty of work arounds for the new FCK (CK) i think where you can port the previous FCK file upload to the new CK editor. (CK charge for file upload modules).

    So if this was not too heavy i’d be inclined to go with CK maybe in the future.

    Good thing about jWysiwyg is it’s so lightweight.

    Thanks again that insight is invaluable. Will look further into the security implications of removing the filters.

    Reply
  11. marcella

    Hi Boone,

    Seen your talk on wordpress.tv and reminded me to come back here and follow up the outcomes.

    I had manually removed all filters which allowed the raw data to be brought back into the site nicely, all was well. Implemented some remove actions on the functions in question and it worked very well.

    For anyones reference really these functions were always located in it’s corresponding -templatetags.php (plugins/buddypress/activity/ – plugins/buddypress /forums/ – plugins/buddypress/whatever/ file in relation to the area you are trying to remove the filter.

    Really not hard, although this was the first time i had hooked onto core files like this minus the occasional excerpt hack in functions.php

    Thanks again buddeh. :)

    Reply
  12. Samuel

    Hi Boone!

    I added the underline, fore color and background color changer buttons, but style is stripped after submitting :( even when the span tag and style attribute is on $allowedtags by default in your plugin.

    Any idea about why BP is stripping this??

    Best regards!

    PS. Hope to see you back to plugin development soon ;)

    Reply
    1. Boone Gorges Post author

      Hi Samuel – Sorry for the delay. Akismet ate your comment.

      Check the source of the page to see if the tags are coming through. If not, check the database to see if they’re being stored there.

      Reply
  13. Matt Brooks

    Figured out the line breaks in bp-tinymce – in plugins/buddypress/bp-activity/bp-activity-filters.php add the following to the allowed tags section around line 100:

    $activity_allowedtags[‘p’] = array();
    $activity_allowedtags[‘em’] = array();
    $activity_allowedtags[‘strong’] = array();
    $activity_allowedtags[‘br /’] = array();
    $activity_allowedtags[‘br’] = array();

    This tells BP to not strip out the and tags and push them through the editor. Sweet mercy – problem solved for me. I threw in the em and strong tags just because they were missing. This approach shoudl work for existing tags as well. I am about to try adding tags to get the font color to work, as well as a few other things, but this approach should get you all moving in the right direction. I hope this helps.

    Reply
  14. Matt Brooks

    And now we have alignments working as well. Just add the alignment buttons to the bp-tinymce.php just like you add the image button, and the edits made to the activity filters above will allow the alignment buttons to work. I haven’t figured out the font color, even allowing span and style to the allowed tags. If I get it working I will update the solutionn here.

    Reply
  15. Matt Brooks

    Here is a list of the allowed tags in the plugins/buddypress/bp-activity/bp-activity-filters.php file – I added a few extras such as P and Style. I am sure expanding this and adding buttons to the bp-tinymce.php file is the key to unlocking all the major WYSIWYG functions, and I am getting more and more progress as I experiment.

    $activity_allowedtags = $allowedtags;
    $activity_allowedtags[‘span’] = array();
    $activity_allowedtags[‘span’][‘class’] = array();
    $activity_allowedtags[‘span’][‘style’] = array();
    $activity_allowedtags[‘div’] = array();
    $activity_allowedtags[‘div’][‘class’] = array();
    $activity_allowedtags[‘div’][‘id’] = array();
    $activity_allowedtags[‘a’][‘class’] = array();
    $activity_allowedtags[‘img’] = array();
    $activity_allowedtags[‘img’][‘src’] = array();
    $activity_allowedtags[‘img’][‘style’] = array();
    $activity_allowedtags[‘img’][‘alt’] = array();
    $activity_allowedtags[‘img’][‘class’] = array();
    $activity_allowedtags[‘img’][‘width’] = array();
    $activity_allowedtags[‘img’][‘height’] = array();
    $activity_allowedtags[‘img’][‘class’] = array();
    $activity_allowedtags[‘img’][‘id’] = array();
    $activity_allowedtags[‘img’][‘title’] = array();
    $activity_allowedtags[‘code’] = array();
    $activity_allowedtags[‘p’] = array();
    $activity_allowedtags[‘p’][‘style’] = array();
    $activity_allowedtags[‘em’] = array();
    $activity_allowedtags[‘strong’] = array();
    $activity_allowedtags[‘br /’] = array();
    $activity_allowedtags[‘br’] = array();

    Reply
  16. saif

    hi
    BP-TinyMCE installed successfully on my
    wordpress latest network enabled
    BuddyPress latest

    problem is that , when i write in text area and then press button to publish , it gives error , plz write something

    means , the wordpress+buddypress system is detecting the text area empty

    may u help me to fix this problem ?

    saif

    Reply
  17. Boone Gorges Post author

    Matt – Thanks for your updated list. It’s probably best to make those edits in a filter rather than directly in the core BP file, as they’ll be overwritten when you upgrade BP. But I’m due to give this plugin some love sometime soon, and when I do I’ll use your list of allowed tags as a reference for what should be whitelisted in the plugin.

    saif – I will try to fix the problem soon and put the fix into the release version. In the meantime, you might consider this: http://buddypress.org/community/groups/third-party-components-plugins/forum/topic/tinymce-for-buddypress-works-for-12-as-well/#post-42520 The transliteration stuff looks very cool, though it looks like a client-side solution (ie a piece of software that has to be installed on a user’s computer) rather that something that can be embedded in a website.

    Reply
  18. Thomas

    Yes, they are there.
    And there are several other problems when using different webbrowsers. I have to reload the page to see the toolbar and links are not opened in new window in Firefox. Both work fine in IE but activity stream needs to be reloaded manually after posting an update. Strange.

    Reply
  19. Boone Gorges Post author

    If you can see the markup, then it’s a CSS issue and not this plugin’s fault. bp-default doesn’t really display bullet point etc, so you’ll have to manually override that in your child theme.

    As for cross-browser stuff, that’s a problem with TinyMCE itself – there’s not much I can do fix it, unfortunately.

    Reply
  20. jokermill

    Hi, thank you for such a good plugin.
    Can i disable it on forum pages, because i want use bpCKEditor on forum pages

    Reply
  21. Pingback: 高地上的清风 » Blog Archive » 换用bpckeditor以及一个bug的临时解决

  22. Stefan Schridde

    I have installed bp 1.2.8. on wp 3.1. Then I have installed your ”TinyMCE on BP pages Version 0.3.1”. This cuased problems in the privat messages system. Sending reply to privat messages to members produces the following error: ”There was a problem sending that reply. Please try again.” Deactivating the plugin solves the problem.

    May be this is a help to improve your plugin.

    c ya

    Reply
  23. Pingback: bp-tinymce plugin with greek « WP MS + Buddypress experiences

  24. Lena Stergatu

    Hi again,
    I found a typo in line 43 in word curront.
    $bp->curront_component = $bp->messages->slug
    should be
    $bp->current_component = $bp->messages->slug.

    Also I noticed that when you reply in an activity_update the tinymce buttons don’t appear.
    Do you have a fix for that?

    Thanks in advance
    Lena stergatou

    Reply
  25. Lena Stergatu

    Correction to my previous comment.
    If you correct the typo then it is impossible to go to the “/my-groups” page for the login user.
    I can’t find a connection to those two but it happens.

    Reply
  26. Mac

    Hi, I can’t seem to get the tinymce to show up anywhere in my BP. Is it this line? I can’t find anything wrong with it in relation to my install.

    <script language="javascript" type="text/javascript" src="root_domain ?>/js/tinymce/tiny_mce.js”>

    My tiny_mce.js is in the wp-includes/js/tinymce folder. My root directory is different than normal though. I installed WP in a folder named public_html/discussion_forum/

    Thanks for any help you can give!

    Reply
  27. Chris

    Hi, I am trying to install a chat thing, and I want to know how to disable the plugin on that one textarea class. The code I don’t want the plugin on is:

    Reply
  28. Suhas

    Just installed this plugin on WP 3.3.1 and BP is enabled. I am seeing an error

    Call to undefined function wp_tiny_mce on line 44 of wp-content/plugins/bp-tinymce/bp-tinymce.php on line 44…..

    Not sure why but any word of advise?
    Thx

    Reply
  29. Florin

    Hi Boone,

    I have WP 3.2.1 + BP 1.2.9 and this plugin does not work as it should be. I would like to
    know if further development will be done to the plugin so t will work with the above versions (or BP 1.5.*)
    Thank you.

    Reply
      1. Florin

        Hi Boone,

        I have WP 3.2.1 + BP 1.5.1 on a test machine and BP Groupblog installed. When I try to comment or reply to a comment on a group blog,
        the editor window can not be activated (I can not reply or comment). Your plugin is officially “Compatible up to: WP 3.2.1, BuddyPress 1.2.9″. That means that it might not work properly with BP 1.5.1. Any thoughts on that?

        Thank you.

        Reply
      2. Florin

        Hi again,
        I guess my main question is still if you will do some more development on the plugin?

        Thank you.

        Reply
      3. Boone Gorges

        Hi Florin. I have no plans to do more work on the plugin in the immediate future, though if a client site requires the functionality, I’ll certainly upgrade it at that point.

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>