[MOD] EZBBC Toolbar

jojaba · 2010-07-21 12:21:21

[EZBBC Toolbar has been officialy approved! Go to the EZBBC Toolbar ressource page to have the newest version ]
Hello !

That's my first "real" Mod for FluxBB, I need some advices and feedbacks. Thanks in advance
I was looking for a simple toolbar to compose BBCode on FluxBB. Mpock did some that works pretty well, it's called FluxToolbar. But I wanted something that only paste code basically available in FluxBB. So I tried to find on the Web a BBCode composer simple enough to be customize by someone (Me) that have very basic knowledge in JavaScript.

I Found that : http://corpocrat.com/2008/08/15/free-wy … avascript/

I started to modify that file to make it fit to the FluxBB boards.

The result : FluxBB EZBBC Toolbar (FluxBB Easy BBCode Toolbar) [download removed because deprecated]

You just have to edit 4 files (header.php, post.php, edit.php and viewtopic.php), paste a few lines and upload a folder to /plugins/ folder to go on for testing (see the readme file)
Seem to work on : IE 6, 7, 8 (with not all styles take in account, because using css 3), Firefox 3.6.7, Chrome 5.0.*, Opera 10.60.

I paste the code of the Javascript file below to have some feedback to optimize and also, probably, fix the code. I only made copy of the existing code to create the new functions, it should be usefull and helpfull if somebody could read this code and give some advices to a newbie

/*****************************************/
// Name: Javascript Textarea BBCode Markup Editor
// Version: 1.3
// Author: Balakrishnan
// Last Modified Date: 25/jan/2009
// License: Free
// URL: [url]http://www.corpocrat.com[/url]
/******************************************/
// Modified by Jojaba to use on FluxBB 1.4.0 board
// Renamed FluxBB EZBCC Toolbar [FluxBB Easy BBCode Toolbar]
// Version 0.9
// Last Modified Date : 21/07/2010
// URL: [url]http://jojaba.free.fr[/url]
/******************************************/

var textarea;
var content;
document.write("<link href=\"plugins/ezbbc/styles.css\" rel=\"stylesheet\" type=\"text/css\">");


function edToolbar(obj)
{
document.write("<div id=\"toolbar\">");
    
//Text style
/***********/
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/bold.png\" name=\"btnBold\" title=\"Bold\" alt=\"Bold\" onClick=\"doAddTags('[b]','[/b]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/underline.png\" name=\"btnUnderline\" title=\"Underline\" alt=\"Underline\" onClick=\"doAddTags('[u]','[/u]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/italic.png\" name=\"btnItalic\" title=\"Italic\" alt=\"Italic\" onClick=\"doAddTags('[i]','[/i]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/strike-through.png\" name=\"btnStrikethrough\" title=\"Strike-through\" alt=\"Strike-through\" onClick=\"doAddTags('[s]','[/s]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/delete.png\" name=\"btnDelete\" title=\"Delete\" alt=\"Delete\" onClick=\"doAddTags('[del]','[/del]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/insert.png\" name=\"btnInsert\" title=\"Insert\" alt=\"Insert\" onClick=\"doAddTags('[ins]','[/ins]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/emphasis.png\" name=\"btnEmphasis\" title=\"Emphasis\" alt=\"Emphasis\" onClick=\"doAddTags('[em]','[/em]','" + obj + "')\" />");
    
document.write("&#160;&#160;");        
    
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/color.png\" name=\"btnColor\" title=\"Colorize\" alt=\"Colorize\" onClick=\"doColor('" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/heading.png\" name=\"btnHeading\" title=\"Heading\" alt=\"Heading\" onClick=\"doAddTags('[h]','[/h]','" + obj + "')\" />");

document.write("&#160;&#160;");    
    
//Links and images
/*****************/
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/link.png\" name=\"btnLink\" title=\"Insert URL Link\" alt=\"Insert URL Link\" onClick=\"doURL('" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/email.png\" name=\"btnEmail\" title=\"Insert E-mail Link\" alt=\"Insert E-mail Link\" onClick=\"doEmail('" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/image.png\" name=\"btnPicture\" title=\"Insert Image\" title=\"Insert Image\" onClick=\"doImage('" + obj + "')\" />");

document.write("&#160;&#160;");    
    
//Quotes and Code
/****************/    
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/quote.png\" name=\"btnQuote\" title=\"Quote\" alt=\"Quote\" onClick=\"doQuote('" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/code.png\" name=\"btnQuote\" title=\"Code\" alt=\"Code\" onClick=\"doAddTags('[c o d e]','[/c o d e]','" + obj + "')\" />");

document.write("&#160;&#160;");        

//Lists
/******/
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/list-unordered.png\" name=\"btnUnorderedlist\" title=\"Unordered List\" alt=\"Unordered List\" onClick=\"doList('[list=*]
[*]','[/*]
[/list]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/list-ordered.png\" name=\"btnOrderedlist\" title=\"Numbered Ordered List\" alt=\"Numbered Ordered List\" onClick=\"doList('[list=1]
[*]','[/*]
[/list]','" + obj + "')\" />");
    document.write("<img class=\"button\" src=\"plugins/ezbbc/images/list-ordered-alpha.png\" name=\"btnAlphabeticalorderedlist\" title=\"Alphabetical Ordered List\" alt=\"Alphabetical Ordered List\" onClick=\"doList('[list=a]
[*]','[/*]
[/list]','" + obj + "')\" />");

document.write("&#160;&#160;");

//Smileys
/********/
    document.write("<ul>");
    document.write("<li><img class=\"button\" src=\"img/smilies/smile.png\" title=\":)\" alt=\":)\" onClick=\"doSmilie(':)','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/neutral.png\" title=\":|\" alt=\":|\" onClick=\"doSmilie(':|','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/sad.png\" title=\":(\" alt=\":(\" onClick=\"doSmilie(':(','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/big_smile.png\" title=\":D\" alt=\":D\" onClick=\"doSmilie(':D','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/yikes.png\" title=\":o\" alt=\":o\" onClick=\"doSmilie(':o','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/wink.png\" title=\";)\" alt=\";)\" onClick=\"doSmilie(';)','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/hmm.png\" title=\":/\" alt=\":/\" onClick=\"doSmilie(':/','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/tongue.png\" title=\":p\" alt=\":p\" onClick=\"doSmilie(':p','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/lol.png\" title=\":lol:\" alt=\":lol:\" onClick=\"doSmilie(':lol:','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/mad.png\" title=\":mad:\" alt=\":mad:\" onClick=\"doSmilie(':mad:','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/roll.png\" title=\":rolleyes:\" alt=\":rolleyes:\" onClick=\"doSmilie(':rolleyes:','" + obj + "')\" /></li>");
    document.write("<li><img class=\"button\" src=\"img/smilies/cool.png\" title=\":cool:\" alt=\":cool:\" onClick=\"doSmilie(':cool:','" + obj + "')\" /></li>");
    document.write("</ul>");


document.write("</div>");
}

//Function to add smilies
/************************/
function doSmilie(smilie,obj)
{
    textarea = document.getElementsByName(obj)[0];
// Code for IE
if (document.selection) 
    {
        textarea.focus();
        var sel = document.selection.createRange();
        //alert(sel.text);
        sel.text = smilie;
    }
// Code for Mozilla Firefox    
else 
    {  
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;
        var scrollTop = textarea.scrollTop;
        var scrollLeft = textarea.scrollLeft;
        var sel = textarea.value.substring(start, end);
        //alert(sel);
        var rep = smilie;
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
}

//Function to add tags before and after the selected text (for most simple BBCode)
/*********************************************************************************/
function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementsByName(obj)[0];
// Code for IE
if (document.selection) 
    {
        textarea.focus();
        var sel = document.selection.createRange();
        //alert(sel.text);
        sel.text = tag1 + sel.text + tag2;
    }
// Code for Mozilla Firefox    
else 
    {  
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;
        var scrollTop = textarea.scrollTop;
        var scrollLeft = textarea.scrollLeft;
        var sel = textarea.value.substring(start, end);
        //alert(sel);
        var rep = tag1 + sel + tag2;
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
}                

//Function to add the Color BBCode tags
/**************************************/                
function doColor(obj)
{
textarea = document.getElementsByName(obj)[0];
var color = prompt('Enter the Color code:');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (color != '' && color != null)
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                if (sel.text != "")
                    {
                    sel.text = '[color=' + color + ']' + sel.text + '[/color]';
                    }
                else
                    {
                    sel.text = '[color=' + color + ']Text to colorize[/color]';
                    }
            }
        else 
            {
                var len = textarea.value.length;
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
        
                var sel = textarea.value.substring(start, end);
        
                if (sel != "")
                    {
                    var rep = '[color=' + color + ']' + sel + '[/color]';
                    }
                else
                    {
                    var rep = '[color=' + color + ']Text to colorize[/color]';
                    }
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }
}

//Function to add the link BBCode Tags
/*************************************/                
function doURL(obj)
{
textarea = document.getElementsByName(obj)[0];
var url = prompt('Enter the URL:','http://');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (url != '' && url != null)
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                
                if (sel.text=="")
                    {
                        sel.text = '[url]'  + url + '[/url]';
                    } 
                else
                    {
                        sel.text = '[url=' + url + ']' + sel.text + '[/url]';
                    }            
                //alert(sel.text);
            }
        else 
                {
                    var len = textarea.value.length;
                    var start = textarea.selectionStart;
                    var end = textarea.selectionEnd;
        
                    var sel = textarea.value.substring(start, end);
        
                    if (sel=="")
                    {
                        var rep = '[url]' + url + '[/url]';
                    }
                else
                    {
                        var rep = '[url=' + url + ']' + sel + '[/url]';
                    }
                //alert(sel);
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }
}

//Function to add the Email link BBCode Tags
/*******************************************/                
function doEmail(obj)
{
textarea = document.getElementsByName(obj)[0];
var email = prompt('Enter E-mail:','pseudo@domaine.tld');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (email != '' && email != null)
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                
                if (sel.text=="")
                    {
                        sel.text = '[email]'  + email + '[/email]';
                    } 
                else
                    {
                        sel.text = '[email=' + email + ']' + sel.text + '[/email]';
                    }            
                //alert(sel.text);
            }
        else 
                {
                    var len = textarea.value.length;
                    var start = textarea.selectionStart;
                    var end = textarea.selectionEnd;
        
                    var sel = textarea.value.substring(start, end);
        
                    if (sel=="")
                    {
                        var rep = '[email]' + email + '[/email]';
                    }
                else
                    {
                        var rep = '[email=' + email + ']' + sel + '[/email]';
                    }
                //alert(sel);
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }
}

//Function to add the Image BBCode Tags
/**************************************/
function doImage(obj)
{
textarea = document.getElementsByName(obj)[0];
var url = prompt('Enter the Image URL:','http://');
var alt = prompt('Enter the alternative text:','Image description');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (url != '' && url != null)
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                if (alt != '')
                    {
                        sel.text = '[img=' + alt + ']' + url + '[/img]';
                    }
                else
                    {
                        sel.text = '[img]' + url + '[/img]';
                    }
            }
        else 
            {
                var len = textarea.value.length;
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
        
                var sel = textarea.value.substring(start, end);
                if (alt != '')
                    {
                        var rep = '[img=' + alt + ']' + url + '[/img]';
                    }
                else
                    {
                        var rep = '[img]' + url + '[/img]';
                    }
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }

}

//Function to add the Quote BBCode Tags
/**************************************/
function doQuote(obj)
{
textarea = document.getElementsByName(obj)[0];
var author = prompt('Enter the person you cite:');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (author != '' && author != null)
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                if (sel.text != "")
                    {
                        sel.text = '[quote=' + author + ']' + sel.text + '[/quote]';
                    }
                else
                    {
                        sel.text = '[quote=' + author + ']Here you must type or paste your citation[/quote]';
                    }
            }
        else 
            {
                var len = textarea.value.length;
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
        
                var sel = textarea.value.substring(start, end);
                if (sel != "")
                    {
                        var rep = '[quote=' + author + ']' + sel + '[/quote]';
                    }
                else
                    {
                        var rep = '[quote=' + author + ']Here you must add your citation[/quote]';
                    }
            
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }

else
    {
        if (document.selection) 
            {
                textarea.focus();
                var sel = document.selection.createRange();
                if (sel.text != "")
                    {
                        sel.text = '[quote]' + sel.text + '[/quote]';
                    }
                else
                    {
                        sel.text = '[quote]Here you must type or paste your citation[/quote]';
                    }
            }
        else 
            {
                var len = textarea.value.length;
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
        
                var sel = textarea.value.substring(start, end);
                if (sel != "")
                    {
                        var rep = '[quote]' + sel + '[/quote]';
                    }
                else
                    {
                        var rep = '[quote]Here you must add your citation[/quote]';
                    }
            
                textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
                textarea.scrollTop = scrollTop;
                textarea.scrollLeft = scrollLeft;
            }
    }
}

//Function to add the List BBCode Tags
/**************************************/
function doList(tag1,tag2,obj)
{
textarea = document.getElementsByName(obj)[0];
// Code for IE
    if (document.selection) 
        {
            textarea.focus();
            var sel = document.selection.createRange();
            var list = sel.text.split('\n');
        
            for(i=0;i<list.length;i++) 
                {
                    list[i] = '[*]' + list[i] + '[/*]';
                }
            //alert(list.join("\n"));
            sel.text = tag1 + '\n' + list.join("\n") + '\n' + tag2;
        }
// Code for Firefox
    else
        {
            var len = textarea.value.length;
            var start = textarea.selectionStart;
            var end = textarea.selectionEnd;
            var i;
        
            var scrollTop = textarea.scrollTop;
            var scrollLeft = textarea.scrollLeft;

        
            var sel = textarea.value.substring(start, end);
            //alert(sel);
        
            var list = sel.split('\n');
        
            for(i=0;i<list.length;i++) 
                {
                    list[i] = '[*]' + list[i] + '[/*]';
                }
            //alert(list.join("<br>"));
        
        
            var rep = tag1 + '\n' + list.join("\n") + '\n' +tag2;
            textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        
            textarea.scrollTop = scrollTop;
            textarea.scrollLeft = scrollLeft;
        }
}

A few questions

How can I localize the strings that have to be translated in the ed.js file (title, alt attributs) ?
How can I give back the focus on the textarea after adding some BBCode (it seems that this is not the case for the moment) ?
I would like to add a colorpicker to add the color code (easier for beginners), how do I do that ?

Thanks in advance

Last edited by jojaba (2010-09-04 07:41:41)

jojaba · 2010-07-22 07:20:07

jojaba wrote:

How can I give back the focus on the textarea after adding some BBCode (it seems that this is not the case for the moment) ?

Just found out how to make this. I just added the following line at the end of all functions :

textarea.focus();

For example the doAddTags() function will be changed to this (just last line added):

function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementsByName(obj)[0];
// Code for IE
if (document.selection) 
    {
        textarea.focus();
        var sel = document.selection.createRange();
        //alert(sel.text);
        sel.text = tag1 + sel.text + tag2;
    }
// Code for Mozilla Firefox    
else 
    {  
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;
        var scrollTop = textarea.scrollTop;
        var scrollLeft = textarea.scrollLeft;
        var sel = textarea.value.substring(start, end);
        //alert(sel);
        var rep = tag1 + sel + tag2;
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
textarea.focus();
}

This gives back the focus to the textarea but places the cursor at the end of the message. I would like that the cursor blinks just after the tags that have been added.

Last edited by jojaba (2010-07-22 07:22:14)

jojaba · 2010-08-23 07:35:46

Well here I am again with an other version of EZBBC Toolbar...
I just saw that Daris already did such a simple toolbar (Easy BBCode), sorry for that, but I also wanted to do such a toolbar to handle with javascript, a language that I would like to learn more about... I based this work on a tutorial provided by ThunderSeb (in French sorry!)
So here is the new package (please, first uninstall the 0.9 version before beginning with the installation) :

Download link removed because obsolete

I don't know if I can call this a modification, but all you have to do is upload the files then visit the admin page of the plugin, that's it, the Toolbar is installed! Easy isn't it?

Code completely changed (based on that ThunderSeb tutorial: http://www.siteduzero.com/tutoriel-3-34 … texte.html)
Just one line automatically added in each modified file (edit.php, post.php, viewtopic.php, header.php)
Tested on IE 6, 7, 8, Chrome 5, Firefox 3.6.8, Opera 10.61.
Languages available : English and French (the plugin is fully localized, if you want to provide this plugin into your own language, your welcome! ).
4 different Toolbar styles available (possibility to create other styles)
Easy to disable and reenable
...

I wanted it to be the easiest to use by a "basic" user, so many functionnalities have been added. For example, if you want to create a list, you can click on the list button then give each item in prompts (if a prompt is leaving empty, this will mean that the list is finished and it will be displayed in BBCode format). If you already typed the items of the list (each item in a new line) in the textarea, select them and click on the list button, the BBCode will be inserted with the provided items. I didn't add a color Picker for the moment, this will maybe done in a future version...
Concerning the core of that mod/plugin, you will see that all files are located in the plugins folder. I think it is easier to maintain if you have all the stuff on the same place...

I would really appreciate if somebody could test this mod/plugin and give his opinion.

Thanks in advance

If there is a "German" folder in the "lang" folder of your downloaded package, please remove it before installing, I forget it to remove before making the zip file... Sorry for that. I fixed that today on 11:53 am.

Last edited by jojaba (2010-08-25 12:02:49)

jojaba · 2010-08-25 12:01:19

While using this toolbar I found some problems. Here's a new version fixing these problems :

Download link removed because deprecated

Changelog

Improved user prompt input handling - now taking in account the null value (when clicking on the "Cancel button")
Fixed some Javascript syntax errors
Improved locales (removing obsolete lines and improving some strings)
Improving some tags handling (email, heading, list)

How to update?

Upload the files to the server
Go to admin page of the plugin in administration panel
Eventually, change the style on the admin page

Please, give feedback (I'm beginning in Javascript so I need help to validate the code)

Last edited by jojaba (2010-08-27 15:33:03)

jojaba · 2010-08-26 10:16:33

Just submited EZBBC Toolbar to the ressource page :
http://fluxbb.org/resources/mods/ezbbc-toolbar

Waiting for validation...

jojaba · 2010-08-27 15:17:57

I'm proud to announce that my first submited FluxBB Mod has been validated

FluxBB devs wrote:

Congratulations! "EZBBC Toolbar", the modification you submitted at the FluxBB modification repository, was just reviewed and approved.
Your modification is now publicly visible again.
You can access it at: http://fluxbb.org/resources/mods/ezbbc-toolbar/

Last edited by jojaba (2010-08-27 15:18:27)

jojaba · 2010-08-31 16:09:28

Version 1.1.2 has been released :
http://fluxbb.org/resources/mods/ezbbc- … ses/1.1.2/

ehtime · 2010-09-01 01:55:44

Good, Mark.

ccs9623 · 2010-09-05 02:10:55

What is the "Admin Plugin Page"? I don't see anything in FluxBB that deals with plugins?

Mpok · 2010-09-05 03:31:17

@ccs9623 : on "Admin" page, u can see a link to every "plugin" u installed.
U should have an entry in this list for EZBBC Toolbar.

ccs9623 · 2010-09-05 04:15:51

Mpok,

Ok, thanks for the reply. I finally figured out the problem. The README file lists this:

/files/ to /your_forum_folder/

Ok, to me that means copy the /files/ folder into the root of the forums folder.

So then I thought maybe that whole folder needed to be in the /forum/plugins (which made sense, but the comments about the plugin in said it used an "uncommon" install method so I figure ... well, anyway)

That didn't work, so then I copied the CONTENTS of the /files/ folder into the plugins folder and bingo! It came up in the admin page.

You have to admit that the README is terribly misleading. Just a couple of sentences would make all the difference in the world.

Last edited by ccs9623 (2010-09-05 04:24:55)

jojaba · 2010-09-05 08:19:21

ccs9623 wrote:

Ok, thanks for the reply. I finally figured out the problem. The README file lists this:
/files/ to /your_forum_folder/
Ok, to me that means copy the /files/ folder into the root of the forums folder.

First of all, thanks for this feedback
Your right ccs9623, the meaning is not obvious. I looked to the Readme file :

#
#---------[ 1. UPLOAD ]------------------------------------------------
#---------[ 1. ENVOYER LES FICHIERS ]----------------------------------
#

/files/        to        /your_forum_folder/

The misunderstanding comes from "UPLOAD". I will replace it by "UPLOAD THE CONTENT OF", this will probably solve this misunderstanding. In the next release...

ccs9623 wrote:

That didn't work, so then I copied the CONTENTS of the /files/ folder into the plugins folder and bingo! It came up in the admin page.

That's not right! You have to send the content of the /files/ folder into the root forum installation folder (the /files/ folder contains the /plugins/ folder containing the ezzbbc files). Or you should say : upload the content of the /files/plugins/ folder to the /root_forum/plugins/ folder

Last edited by jojaba (2010-09-05 08:25:22)

jojaba · 2010-09-17 16:34:03

Hello everybody

The project

I'm working on the next release:

Fixing small bugs.
Adding a help button to display a help page.

I really appreciate when software is localised, so I would like to see if some user would help me to add to the next release other languages then French and English. That's why I give you here a link to a zip file containing the English language folder.

The archiv : http://code.google.com/p/jojaba-code/do … -1.1.3.zip

The English language folder contains 2 files :

ezbbc_plugin.php: this file is the translation for the toolbar and the admin page
help.php: this is the help file written in HTML language, you have to translate only what concerns the explanation, not the code (the translation of this file is optionnal)

How to translate ?

First a warning: remember that these two files are utf-8 encoded, so look after the encoding setting in your text editor before you begin with your translation.

The ezbbc_plugin.php file
Here's the content of that file:

<?php

// Language definitions used in EZBBC Toolbar Plugin
$lang_ezbbc = array(

//For the admin plugin page
'Plugin in action'        =>    'Plugin in action!',
'Plugin disabled'        =>    'The plugin has been disabled.',
'Plugin wrong installation'     =>      'The plugin seems not to be installed properly. Please click on the enable button to reinstall it',
'Style changed'                 =>      'The style has been modified!',
'Date format'                =>    'Y/m/d \a\t H:m',
'Plugin title'                =>    'EZBBC Toolbar',
'Description title'        =>    'Description',
'Explanation'                =>    'This plugin allows the users to use a simple BBCode insertion toolbar.<br />Each time you update the installation of the FluxBB boards, you should go back to this page to reinstall this plugin.',
'Form title'                =>    'Information and actions',
'Change style'                  =>      'Change the style',
'Legend style'                  =>      'Please select the Toolbar style',
'Legend status'                =>    'Here are all the information you have to know about the plugin status.',
'Toolbar preview'               =>      'Toolbar preview',
'No preview'                    =>      'No preview available',
'Plugin version'                =>      'EZBBC Toolbar plugin version:',
'Installation date'        =>    'This version of the plugin has been installed on',
'Plugin status'                =>    'Plugin status:',
'Enable'            =>    'Enable EZBBC Toolbar',
'Disable'            =>    'Disable EZBBC Toolbar',

//For the Javascript file
'Ask url'                    =>    'What is the URL? (beginning with \"http://\", \"https://\", \"ftp://\" or \"www.\")',
'Ask label'                     =>    'What is the label?',
'Ask author'                    =>    'What is the author?',
'Ask quotation'                =>    'What is the quotation?',
'Ask color'                     =>      'What Color?',
'Ask color explanation'         =>      'You can type keywords like \"blue\", \"green\", \"red\", \"purple\" or hex values like \"#DDDDDD\"',
'Ask colorized text'            =>      'Text that has to be colorized',
'Ask title'                     =>      'What is the title text?',
'Ask email'                     =>      'What is the E-mail address? (containing \"@\")',
'Ask url img'                    =>    'What is the URL? (beginning with \"http://\", \"https://\" or \"ftp://\")',
'Ask alt'                       =>      'What is the alternative text? (this text displays in case the image doesn\'t display for any reason)',
'Ask item'                      =>      'Item #', //After that string the item number is displayed
'Ask item explanation'          =>      'If you don\'t want to add more items to the list, just leave the field empty and click on \"OK\" button or hit the \"Enter\" key.',


//For the toolbar
'Bold'                        =>    'Bold',
'Underline'                =>    'Underline',
'Italic'                =>    'Italic',
'Strike-through'            =>    'Strike-through',
'Delete'                =>    'Delete',
'Insert'            =>    'Insert',
'Emphasis'            =>    'Emphasis',
'Colorize'                =>    'Colorize',
'Heading'                =>    'Heading',
'URL'                        =>    'Insert URL Link',
'E-mail'                =>    'Insert E-mail Link',
'Image'                    =>    'Insert Image',
'Quote'                         =>      'Quote',
'Code'                          =>      'Code',
'Unordered List'                =>      'Unordered List',
'Ordered List'                  =>      'Numbered Ordered List',
'Alphabetical Ordered List'     =>      'Alphabetical Ordered List',
'Toolbar help'                  =>      'EZBBC Toolbar help'

);

All you have to translate is the strings located on right from the arrows.

The help.php file
I give you just the beginning of that file:

<?php // Retrieving style folder
$config_content = trim(file_get_contents('../../config.php'));
$config_item = explode(";", $config_content);
$ezbbc_style_folder = $config_item[2];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../style/<?php echo $ezbbc_style_folder ?>/ezbbc.css" />
<title>EZBBC Toolbar help</title>
</head>
<body id="toolbar_help">

<h1>EZBBC Toolbar help</h1>

        <h2 id="common_buttons">Common inline formating buttons</h2>
                <h3>Use</h3>
                        <p>These buttons only insert a beginning and an ending tag to selected text. If no text is selected, then the tags are inserted and the cursor blinks between the beginning and ending tag.<br />
                        This is what it should look like for the Bold button: <code>[b]Selected text[/b]</code></p>
                <h3>Summary</h3>

Here for instance, you have to translate what you see between the <h1>...</h1> tags, the <h2>...</h2> tags, the <h3>...</h3> tags, the <p>...</p> tags, etc.

If you want to translate, please leave here a message just to avoid multiple translation for the same language.
Last note, my english is poor, so if you find some mispelled things don't hesitate to give feedback

Thanks in advance, Jojaba

Last edited by jojaba (2010-09-24 05:33:50)

cyberman · 2010-09-18 05:42:44

Will do the german translation next days ...

jojaba · 2010-09-18 05:46:05

cyberman wrote:

Will do the german translation next days ...

Great, thanks

jojaba · 2010-09-19 18:01:58

Spanish translation completed by jarive (both files were translated)
Thanks a lot!

jarive · 2010-09-19 20:11:43

jojaba wrote:

Spanish translation completed by jarive (both files were translated)
Thanks a lot!

Thank's to you for your effort.

Regards!

jojaba · 2010-09-21 16:29:54

I need help ! https://fluxbb.org/forums/viewtopic.php … 385#p35385
Thanks

jojaba · 2010-09-24 05:53:20

New lang package for the next version (1.1.3):
http://code.google.com/p/jojaba-code/do … -1.1.3.zip

Just a few lines added to the ezbbc_plugin.php file:

line 24: 'Available languages'           =>      'Available languages:',
line 33: 'Ask code'                      =>      'What is the code?',
line 34: 'Ask language'                  =>      'What is the language?',

and at the end of this file adding the tags matching the buttons (line 47-53), example:

'Bold'                        =>    'Bold » [ b ]…[/b ]',

In the help.php file, changigng the "Code button" description to:

<p>If nothing was selected, you will be prompted to enter a code first then the language of this code (php, html, Javascript… - optionnal). If something was selected, you will be asked for a language.<br />
This is what it should look like: <code>[ code ][== language ==]Code[ /code ]</code>.</p>

Last edited by jojaba (2010-09-24 06:09:15)

jojaba · 2010-09-27 09:34:26

I need help ! https://fluxbb.org/forums/viewtopic.php … 385#p35385
Thanks

Found finally the solution
I will release the new version today or tomorrow, if you have some files to submit (the translation of ezbbc_plugin.php should be enough for the moment ), your welcome

Last edited by jojaba (2010-09-28 04:02:42)

jojaba · 2010-10-08 20:01:05

jojaba wrote:

I will release the new version today or tomorrow...

Well, took a little bit longer ! Thanks to quy for testing this version and pointing out some bad behaviour.
Version 1.2.0 approved and released:
http://fluxbb.org/resources/mods/ezbbc- … ses/1.2.0/

Changelog

In Admin Page

displaying the available languages (English, French, Spanish and German are available for the moment)
adding a button to display the new EZBBC Toolbar help
new set of custom smilies available (based on the tango icons)
two new button styles also available (Blue buttons and Dark buttons)
enhance the code of this page

For the Toolbar

adding a help button near the toolbar
treating the smileys insertion to prevent user spaces omission
adding a field to specify witch language is displayed in a code box
cleaning and reorganising the toolbar_ezbbc.php file source code
improving the title attribut displaying of each button by adding the code that will be paste
displaying default smilies or EZBBC custom smilies depending on the admin settings

wilco · 2010-11-15 01:46:08

I Keep getting the following Errors

Warning: fopen(./header.php) [function.fopen]: failed to open stream: Permission denied in

This for allot of rules starting at rule 87 ending at 153, am I doing something wrong ? It must be because I read allot of good responses about this plugin !!

( excuse my english from netherlands )

jojaba · 2010-11-15 12:26:28

wilco wrote:

I Keep getting the following Errors
Warning: fopen(./header.php) [function.fopen]: failed to open stream: Permission denied in
This for allot of rules starting at rule 87 ending at 153, am I doing something wrong ? It must be because I read allot of good responses about this plugin !!
( excuse my english from netherlands )

Hello wilco!

These errors occurs because the files that are automatically changed by the EZBBC Toolbar script don't leave it do it. You have to change the permission on these files:

header.php
edit.php
post.php
viewtopic.php
include/parser.php

wilco · 2010-11-17 12:54:08

jojaba wrote:

wilco wrote:
I Keep getting the following Errors
Warning: fopen(./header.php) [function.fopen]: failed to open stream: Permission denied in
This for allot of rules starting at rule 87 ending at 153, am I doing something wrong ? It must be because I read allot of good responses about this plugin !!
( excuse my english from netherlands )
Hello wilco!
These errors occurs because the files that are automatically changed by the EZBBC Toolbar script don't leave it do it. You have to change the permission on these files:
header.php
edit.php
post.php
viewtopic.php
include/parser.php

It worked !! Very nice, THANKS !!
is there any extra tweak to add youtube movie button ? That would be very great !!

jojaba · 2010-11-17 21:07:57

wilco wrote:

is there any extra tweak to add youtube movie button ? That would be very great !!

No not on my Mod that has been made only for the html code basically supported by Fluxbb Board. If you want to add youtube videos and a toolber offering more buttons, install the FluxToolbar Mod (before installing FluxToolbar, I would suggest to uninstall ezbbc Mod)

Forums

#1 2010-07-21 12:21:21