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!
You must be logged in to reply to this topic.
