Advanced BBCode Box for RavenNuke v2.5

Posted: Mon May 14, 2012 6:51 pm

PHPBB2 Forum BBCode Modification for RavenNuke™ v2.5, which expands the standard BBCode features to allow: audio/video embeds, text formatting/styling options, image/video positioning, dynamic twitter signatures, customizable color swatches, inline ajax help, forum search "tags", modal search functions for wikipedia and duckduckgo, as well as various other features.

Improved UI and CSS layout which can be customized per theme. Four sprite powered editor themes included in sand, light blue, crimson, and black; or build your own with a little CSS know-how and the included photoshop files. Several optional addons are included to further enhance your RavenNuke™ powered site; which allows you to add code highlighting, link icons, easy youtube videos, and/or hashtags.

After an easy installation, courtesy of a comprehensive, kickstart powered install guide, you may find yourself asking, "Who needs phpbb3?"

New Features

Improved UI, CSS Layout, and CSS Sprites
Editor Toolbars are styled completely via CSS, allowing the editor to be styled to match individual themes and break-out of the MS-Word 2003 look. All images within the editor now use CSS sprites, with many buttons featuring mouseover and toggle effects. The majority of toolbars are hidden initially, and are toggled into view by one of the visible buttons; with a nice jQuery SlideToggle animation.

Text Size Selection
Font size selection now uses buttons instead of a select menu, and also utilizes CSS classes instead of inline styling. In most cases relative sizes are used, which offers greater flexibility regardless of the initial default font-size that a given theme/visitor is using. Another advantage of using buttons, is that previously the same text size could not be applied more than once in a row; as the bbcode was only inserted when the value of the select menu changed.

Font Type and Custom Classes
Font type selection also uses buttons instead of a select menu, utilizing CSS classes instead of inline styling. Basic font classes are defined to display the most similar font regardless of operating system or browser, as not all fonts are actually available on all operating systems. Font declarations can be overridden by theme, so if you prefer to replace a button with a custom font (like those from font squirrel) you can!

Size and Positioning Options for Multimedia Embeds
A variety of size and positioning options have been added for YouTube and (the newly added) Internet Archive video embeds. Both embed types utilize the iframe method, which allows for device specific videos to be delivered to the user. This means the user may get a html5 or flash video depending on the capabilities of the given device viewing the site. Size and positioning options are CSS based and can be customized by theme

Custom Color Swatches and Color Picker
The color select menu has been replaced by swatches that can be customized by theme. For example, there is no reason to offer black text if your theme uses black backgrounds. Also offers the advantage of matching the color palette to an individual theme, as dark colors work better for light backgrounds, and pastel colors work better for dark backgrounds. Custom hex colors can be applied via the newly added jscolor color picker.

Various New Features
While not a complete overview, just a few of the new features available in ABBC2.5

Float an Image to the Left [imgleft]http://yoursite.com/image.jpg[/imgleft]
Float an Image to the Right [imgright]http://yoursite.com/image.jpg[/imgright]
DuckDuckGo Web Search in Modal [duck]your search term[/duck]
Wikipedia Search in Modal [wiki]your search term[/wiki]
International Wikipedia Search in Modal [wiki=es]suerte[/wiki]
Forums Search/Keyword Tag [tag]forum search term[/tag]
Dynamic Twitter Signature [twitter]username[/twitter]
Internet Archive (audio) [archive="audio"]http://archive.org/details/MozartEineKleineNachtmusik[/archive]
Internet Archive (video) [archive="video"]http://archive.org/details/night_of_the_living_dead[/archive]
Video Size [youtube="video-large"]http://www.youtube.com/watch?v=lDxyJGMJ_P8[/youtube]
Video Position [archive="video-center"]http://archive.org/details/the_brain_that_wouldnt_die[/archive]
Video Size & Position [youtube="video-small-left"]http://www.youtube.com/watch?v=lDxyJGMJ_P8[/youtube]

Non-BBCode Features

Inline Ajax Help
Several of the toolbars feature inline help which is loaded directly into the editor via ajax, giving users basic tips without having to open another browser window.

Full Width Padded Textarea
A somewhat experimental 100% width cross-browser padded auto-expanding textarea (that's a mouthful), which is not an easy task due to the differences with how textareas are rendered by various browsers. A minimum and maximum height can be configured so that the textarea doesn't grow more than desired (default max 600px) as at some point the user would need to scroll anyway... (running out of visible space in the browser window)

Insert at Caret Position
In order to perform more like an actual editor, all codes are now inserted at the caret position; as well as updating the caret position code for smilies which did not work reliably in some browsers. Tested in browsers below.

Browser Compatibility
Tested on Firefox (Win7,WinXP,Linux Mint), Internet Explorer 8-9 (WinXP,Win7), Google Chrome (WinXP,Win7), Safari (Win7), and Opera (Win7)

Optional Features

Code Highlighting featuring Highlight
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it. Growing assortment of CSS based themes allows highlighting to be customized on a theme-by-theme basis. 16 languages are supported by default, although over 40 languages can be used if required by an individual site. The basic 16 valid classes are: apache, bash, cpp, cs, css, diff, html, ini, java, javascript, perl, php, python, ruby, sql, xml

Iconize Links to Desired Sites
A purely CSS based addon which automatically adds icons to links, allowing for specific icons to be used for specific sites. Use the included Vector Social Media Icons to "Iconize" as many popular social sites as desired; or create/find your own icons to "Iconize" your favorites sites from around the web. Easy to add sites and customize to your needs. Intended for use in the forums, but can be used sitewide if desired.

Easy YouTube Video Embeds
Let's face it, users are lazy or don't necessarily always understand how to use bbcode. So why not allow for easy embedding of youtube videos by simply including the URL to the video, with no extra markup required? Enter the EasyTube Mod to add auto-embed support for over a dozen popular youtube URL's. Special thanks to eldorado for the idea and getting the ball rolling on implementation, and to ridgerunner for writing and maintaining an excellent regular expression suited for the job.

Tricked Out News #hashtag Mod
Adds a Twitter like hashtag mod for your RavenNuke(tm) forum. If you are not familiar with hashtags, they are any SINGLE word that you place the # sign in front of, to link to a keyword search in the forum. Although it functions in a similar manner to that of the newly added [tag]term[/tag] it makes a nice shorthand compliment for quickly tagging desired posts. Not to mention, installation only requires one additional line of code! Thanks nuken!

Find it at Tricked Out News and get previews or become a fan of the mod on Facebook: www.facebook.com/AdvancedBBCodeBoxForRavenNuke

Site Admin Joined: Aug 22, 2007 Posts: 1774

spasticdonkey, this is a amazing work! thanks & liked on fb! Smile

Posted: Wed May 16, 2012 12:30 pm

neralex wrote:

spasticdonkey, this is a amazing work! thanks & liked on fb! Smile

Yes he did an awesome job Very Happy

spasticdonkey , i'll look into it ASAP Very Happy

I have found a very neat thing that could interrest you as part of the "Lazy user helper automation process"

for example : [ Only registered users can see links on this board! Get registered or login! ]

would help you prefix the favicon to the website url such as this would :
[img]favicon[/img][_url]http://trickedoutnews.com/download-file-121.html[/url]

Posted: Wed May 16, 2012 1:22 pm

cool thanks! just note there were changes to the copy I pm'd you a few days ago and you should get a fresh copy at tricked out news.

the getfavicon service looks interesting.. although I don't really want to look at the mod again for awhile unless something is broken Smile

Maybe in a future version and just use the php class that site uses directly [ Only registered users can see links on this board! Get registered or login! ]
so you can cache results, etc. food for thought.

Posted: Wed May 16, 2012 1:45 pm

Yes indeed, I've seen the class before linking the url.
I just thought it would be easier for someone browsing our forums to use the site's function rather than implement it in php.

I'll get the fresh version and see how it works

Posted: Fri Jun 01, 2012 5:38 pm

wow! this is kick butt! and should be a software for purchase. will download. and after full install will give donation Smile

Posted: Fri Jun 01, 2012 5:53 pm

cool stuff man, glad you like it. Note there are a couple tweaks to the mod suggested over on nuken's site in the Forums... but have not updated them within the Download as of yet.

Posted: Tue Jun 05, 2012 12:15 pm

Very nice, I'm using it myself.
My only gripe so far is when posting 'code' it seems as though each line is double spaced but in fairness, it is most likely an issue with my default CSS (or me rushing the install Smile

)

Posted: Tue Jun 05, 2012 12:40 pm

Glad you are enjoying it.

There were a few changes to the pre-release files/readme I pm'd you. I touched briefly on this in the revised "Customizing Forum Styles" section in the readme (4th page).. I had used white-space:pre-wrap for code containers to make installing the highlighting addon easier, assuming most users posting code would use the highlighting addon....

Quote:

If you are NOT using the Code Highlighter addon, but still posting code samples it is recommended that all occurrences of white-space:pre-wrap within bbcode_addons.css be changed to white-space:normal or code will be double spaced.

Posted: Tue Jun 05, 2012 2:00 pm

That explains it Smile

I'll get the highlighting add-on hooked up sometime soon as I only did preliminary testing before running out of time (again).

Posted: Sun Jul 12, 2015 7:24 am

Hi

This is a great add!!

Unfortunately, I had some issues with it and have been searching all posible posts on different sites but found nothing.

First, the code select button wouldn't display any selection for the languages, it will display "[code]" instead in the text area. After so many tries I came to a kind of solution:
in posting_body.tpl
Find

php Code:

<img src="images/transparent.gif" class="postimage bbc-inactive" id="abbccode" onclick="{S_ABBC_CODETYPE}()" onmouseover="helpline('abbccode')" alt="" />

and replace it with

php Code:

<img src="images/transparent.gif" class="postimage bbc-inactive" id="abbccode" onclick="BBCcodetype()" onmouseover="helpline('abbccode')" alt="" />

and that's because there is NO function: S_ABBC_CODETYPE in the bbcode_box.js !!!

Another issue is
When trying to post the above code on my board the "onclick" statement has been removed from the preview and removed from the post when sent!
This issue has no relation with this modification because I tried it before and after changing that function

Earlier, I came to a different conflict with the charset and using special characters, which has been solved thanks to the help of "neralex" in this post:
utf-8 characters problem
But I can't figure out if this one has anything to do with the charset thing.

Thanks for any help Rolling Eyes

Posted: Sun Jul 12, 2015 10:42 am

I have not looked at that code in a long time but I can tell you that the curly brackets in this code:

Code:

{S_ABBC_CODETYPE}

are used by the phpBB templating system to parse whatever is inside.
The fact it wouldn't work for you seems to indicate that the S_ABBC_CODETYPE tranlsation wasn't available for the forum language selected.

The add-on seems to be working ok on my website (which uses utf- Cool

and the preview seems ok as well but that is about all I can say as I just don't have any time right now to investigate further.

Posted: Sun Jul 12, 2015 6:53 pm

There is a setting $UseCodeHighligher in:

includes/addons/head-abbcbox.php

which defaults to false. undoing your change above and setting it to true should get you going.

Posted: Sun Jul 12, 2015 11:32 pm

Thanks, yes it solved the button displaying issue, but still the "onclick="{S_ABBC_CODETYPE}()" onmouseover="helpline('abbccode')" " is removed from output !! Rolling Eyes

Posted: Mon Jul 13, 2015 6:48 am

it should not output

Code:

onclick="{S_ABBC_CODETYPE}()"

unless you have not edited posting.php (or your forum template) correctly. it should output one of these depending on the previously mentioned setting $UseCodeHighligher

Code:

onclick="BBCcodetype()"

Code:

onclick="BBCbasiccode()"

Posted: Mon Jul 13, 2015 8:39 am

Sorry spasticdonkey, I don't get it right Rolling Eyes

I want to post

php Code:

<img src="images/transparent.gif" class="postimage bbc-inactive" id="abbccode" onclick="{S_ABBC_CODETYPE}()" onmouseover="helpline('abbccode')" alt="" />

ant the post is published:

php Code:

<img src="images/transparent.gif" class="postimage bbc-inactive" id="abbccode" alt="" />

You can have a try on my forum if you want, and see how things are removed when posting codes!

The only edit I did was adding ENT_QUOTES, _CHARSET to htmlspecialchars in posting.php as said in link i posted previously. So, I can't see where to scratch.

Thanks

Posted: Wed Jul 15, 2015 7:45 pm

I believe you are having issues with posting code that includes html. This is because you have html enabled on your forum, which I would disable unless you really need it. See if disabling html on your forums, or on a particular post by checking "Deshabilitar HTML en este mensaje" helps solve your issue.

Posted: Sat Jul 18, 2015 2:32 am

Yeah!!!! That was the problem!! Thanks a lot !!

BTW, There is no point to have the forum with HTML enabled since all the popular functions and lots of html tags are covered with the ABBC tool itself, isn't it??
I will need to go on a "brain wash" soon Embarassed

before posting anything on this site!!! Thanks again Very Happy

Posted: Sun Nov 29, 2015 8:53 am

Code:

I disable html and in my case it looks like it is not filtering the tags: when I post double quotes("") i am getting this &amp;quot; on the forums

Any solution?