HTML and Formatting buttonbar for Forums posts [Code inside]
-
So TinyMCE is a bit of a pain in the butt and conflicts with stuff, and my users have been clamoring for a toolbar above textareas for quick formatting, so I came up with this, which works flawlessly so far.
My skills are insufficient for packaging it up as a plugin, but anyone who is interested in doing so can go ahead, and credit me or not as you like.
Here is a screenshot, and here’s how to get it working.
You’ll need this javascript file, which is a slightly modified version of the original by Alex King.
Here’s the CSS I used for it.
Include those two files in your header.php for your child theme. I keep the javascript in /_inc/js and the css in /_inc/css, for what it’s worth.
Now, for every place where you have a textarea for forum posting — in your childtheme/groups/single/forum/topic.php and /edit.php, childtheme/groups/single/forum.php, childtheme/forums/index.php and so on, you’ll need to add two lines.
In some places, the id/name for the textarea is ‘topic_text’, in some places it’s ‘reply_text’. (There might be another, too, I can’t recall.)
The two lines you’ll need to add are
<div id="quicktags"><script type="text/javascript">edToolbar();</script></div>
just before the textarea and
<script type="text/javascript">var edCanvas = document.getElementById('topic_text');</script>
just after
</form>
If the id/name of the textarea is ‘topic_text’ then use that in the second line, and if it’s ‘reply_text’ use that in the second line.
So, for example, in childtheme/forums/index.php, the original code is
<form action="" method="post" id="forum-topic-form" class="standard-form">
<?php do_action( 'groups_forum_new_topic_before' ) ?>
<a name="post-new"></a>
<h5><?php _e( 'Post a New Topic:', 'buddypress' ) ?></h5>
<label><?php _e( 'Title:', 'buddypress' ) ?></label>
<input type="text" name="topic_title" id="topic_title" value="" />
<label><?php _e( 'Content:', 'buddypress' ) ?></label>
<textarea name="topic_text" id="topic_text"></textarea>
<label><?php _e( 'Tags (comma separated)', 'buddypress' ) ?></label>
<input type="text" name="topic_tags" id="topic_tags" value="" />
<label><?php _e( 'Post In Group Forum:', 'buddypress' ) ?></label>
<select id="topic_group_id" name="topic_group_id">
<?php while ( bp_groups() ) : bp_the_group(); ?>
<?php if ( 'public' == bp_get_group_status() ) : ?>
<option value="<?php bp_group_id() ?>"><?php bp_group_name() ?></option>
<?php endif; ?>
<?php endwhile; ?>
</select>
<?php do_action( 'groups_forum_new_topic_after' ) ?>
<div class="submit">
<input type="submit" name="submit_topic" id="submit" value="<?php _e( 'Post Topic', 'buddypress' ) ?>" />
<input type="button" name="submit_topic_cancel" id="submit_topic_cancel" value="<?php _e( 'Cancel', 'buddypress' ) ?>" />
</div>
<?php wp_nonce_field( 'bp_forums_new_topic' ) ?>
</form>It becomes
<form action="" method="post" id="forum-topic-form" class="standard-form">
<?php do_action( 'groups_forum_new_topic_before' ) ?>
<a name="post-new"></a>
<h5><?php _e( 'Post a New Topic:', 'buddypress' ) ?></h5>
<label><?php _e( 'Title:', 'buddypress' ) ?></label>
<input type="text" name="topic_title" id="topic_title" value="" />
<label><?php _e( 'Content:', 'buddypress' ) ?></label>
<div id="quicktags"><script type="text/javascript">edToolbar();</script></div>
<textarea name="topic_text" id="topic_text"></textarea>
<label><?php _e( 'Tags (comma separated)', 'buddypress' ) ?></label>
<input type="text" name="topic_tags" id="topic_tags" value="" />
<label><?php _e( 'Post In Group Forum:', 'buddypress' ) ?></label>
<select id="topic_group_id" name="topic_group_id">
<?php while ( bp_groups() ) : bp_the_group(); ?>
<?php if ( 'public' == bp_get_group_status() ) : ?>
<option value="<?php bp_group_id() ?>"><?php bp_group_name() ?></option>
<?php endif; ?>
<?php endwhile; ?>
</select>
<?php do_action( 'groups_forum_new_topic_after' ) ?>
<div class="submit">
<input type="submit" name="submit_topic" id="submit" value="<?php _e( 'Post Topic', 'buddypress' ) ?>" />
<input type="button" name="submit_topic_cancel" id="submit_topic_cancel" value="<?php _e( 'Cancel', 'buddypress' ) ?>" />
</div>
<?php wp_nonce_field( 'bp_forums_new_topic' ) ?>
</form>
<script type="text/javascript">var edCanvas = document.getElementById('topic_text');</script>Do this for anywhere there’s a forum posting textarea, and you’ll be good to go! You can modify the javascript quite easily to add things like spoiler divs or whatever.
No warrantee is made here in terms of things blowing up — my coding abilities are not that many notches above cut and paste — but it works fine for me!
Good luck, and like I said, if someone wants to make this into a plugin, please go ahead!
-
‘childtheme’ in the above is, of course, the name of your own child theme. If this doesn’t work for you, well, I probably won’t be much help, I’m sorry to say, but perhaps someone with better skills will be able to step in. Just wanted to share for other people with the same user request.
Hmm. No interest? I guess there’s not as much demand for this as I thought there might be. Ah well, it’s here for people searching for something like this later, I guess.
I believe there would be great interest in this over at BuddyDev with Brajesh’s BP-Gallery plugin. I PM’ed a link to the author.
Hey I got it working, thanks for this, hopefully it’ll get made into a plugin.
I also added some comments here:
@stwc – Thanks for this code! Works great!
anyone ever make a plugin out of this? any good alternatives?
stwc, I’m trying to get this into a plugin for the textareas on the profile pages. If I can get it working, can you send me your info that you want used for credit on getting the start on it please? You can email me at heather (at) dzynit (dot) net.
- The topic ‘HTML and Formatting buttonbar for Forums posts [Code inside]’ is closed to new replies.