WYSIWYG in miniBB

http://www.kevinroth.com/rte/demo.htm
or the more advanced version of the same one: (php-driven)
http://mike.aplosmedia.com/dev/AplosRTE/test_editor.php

They both show up as rtf/wysiwyg editos in ie/gecko(ns/mz), and will render as a normal textbox in opera/konqueror/safari etc.

At least the latter is easy to remove buttons fom (just comment out lines in the php-class).

Very good, but, ooohhh, what shall we do with Opera... :)

Will take a look at it later. We just need 6 definitions of styles :)

As about Opera... So disputable browser. In the new version, they don't have (AGAIN!) support of .getSelection or .selection methods, so in Opera, there is still no possibility to highlight the sentence and automatically quote it... No even talking about WYSIWYG :)

But I want to work over my forum with Opera, too :)

May be this, as it is now (may be with both pop-ups, as we discussed) - as a main distribution, and WYSIWYG addon as a template which to replace the standard one with... Then the admin will decide what browsers to read/write it his forum and will take all the responsibility if he has enough users.

However, more simple and more universal is better.

Greetings.

Three pop-ups - with the "Add Image".

There are very many questions on how to integrate pop-ups, via WYSIWYG form or just standard javascript pop-ups; thus we need to decide how to interpret actual BB codes to HTML... Unfortunatelly, Opera is the last question here.

The standard JavaScript pop-ups are more clear and sure, I think, and work with everithing. It's not about Opera, simply the core will remain lighter than with WYSIWYG. Everyone that wants could replace it with WYSIWYG at the moment he'll find convenient.

Why do you say that in Opera you can't select text. It has not a blinking cursor but you can do the same with the standard arrow pointer - just touching the beginning of the desired text and giding to its end. See, I'll quote you in the next message with Opera.

With selecting text... I've just made it clear today :) The reason was that Opera was not reacting on "onMouseDown" event, but for "onMouseMove", and it also works for another browsers... So, in JavaScript QUOTATION functions, it was necessary to replace this.

onMouseOut, too, Opera reacts. At least, these are that I have tested. I was very wondered why you cannot select text, I select text in Opera for years :)

Wait a minute! From where you got this cute thing??? The new "Quote" option??? Yesterday it wasn't here! I, too, want to have such :) Please tell :)

I meant of course - not to simple selecting text, but selecting it and when pressing on Quote, text pastes to the reply textarea. It didn't work before.

The new "Quote" option??? Yesterday it wasn't here!
This is what I am talking 3rd time about, dude :))

View the source of that page and replace in your template main_posts.html:

function getQuotation() {
var bw=new checkBrowser();
if (bw.ns6 || bw.ie5 || bw.ie6 || bw.ns4 || bw.safari || bw.opr) {
document.writeln('<a href="javascript:paste_strinL(selection,1)" onMouseMove="pasteSel()">Quote<'+'/a>');
}
}

This was changed initially and this is what I'm talking about.
"Quote" option was forever here for IE or Mozilla.

C'est genial!!! I'm sorry I hadn't understood it the first time :)

Is it done already in your today's package? If so, I'll get the template from there and will replace it.

Yes! I saw! It's there :)

well it was there since minibb 1.x :) we had it not working on Mac's but it works on Mac/Safari since miniBB 2.0a has been released as well.

I just found this wysiwyg editor, javascript based. I haven't tried it but it looks like it is also based on minimalism. Read the description:

What is TinyMCE?
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other CMS systems.

http://tinymce.moxiecode.com/

I'm allready tried tinyMCE but it's too much complicated for me, i found this java script on some forum instead and with her I manage to achieve something. You can take a look at

http://www.gentoo-srbija.org/forum.html

You must be logged to see form so here is the test user account:

user: test_user
pwd: password

And here is the script, don't know how opera is behaving but Firefox and IE are OK.

// bbCode control by

// subBlue design

// [url=http://www.subBlue.com]www.subBlue.com[/url]



// Startup variables

var imageTag = false;

var theSelection = false;
// Check for Browser & Platform for PC & IE specific bits

// More details from: [url=http://www.mozilla.org/docs/web-developer/sniffer/browser_type.ht ml]http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html [/url]

var clientPC = navigator.userAgent.toLowerCase(); // Get client info

var clientVer = parseInt(navigator.appVersion); // Get browser version
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));

var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)

&& (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)

&& (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));

var is_moz = 0;
var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));

var is_mac = (clientPC.indexOf("mac")!=-1);
// Helpline messages

d_help = "Stilove možete primeniti na selektovani tekst.";
b_help = "Boldirani tekst: [b]text[/b]";

i_help = "Italik tekst: [i]text[/i]";

u_help = "Podvučeni tekst: [u]text[/u]";
q_help = "Citat: [quote]text[/quote] ili [quote=korisnik]text[/quote]";

c_help = "Prikaz koda: [code]code[/code] ili za naslov koda [code=naslov]code[/code]";

p_help = "Ubacivanje slike: [img]http://www.server.org/image.jpg[/img]";

w_help = "Ubacivanje linka: [url=http://www.server.org]http://www.server.org[/url] or [url=http://www.server.org]URL text[/url]";

fcr_help = "Crvena boja slova [predefinisana]";
fcg_help = "Zelena boja slova [predefinisana]";
fcb_help = "Plava boja slova [predefinisana]";


// Define the bbCode tags

bbcode = new Array();

bbtags = new Array(

'[b]','[/b]', //0

'[i]','[/i]', //2

'[u]','[/u]', //4

'[quote]','[/quote]', //6

'[code]','[/code]', //8

'[ulist]','[/ulist]', //10

'[list]','[/list]', //12

'[img]','[/img]', //14

'[url=',']','[/url]', //16

'[sub]','[/sub]', //18

'[sup]','[/sup]', //20

'[s]','[/s]', //22

'[email]','[/email]', //24

'[align]','[/align]', //26

'[li]','[/li]', //28

'[font #cc1705]','[/font]', //30 red

'[font #0b8c0b]','[/font]', //32 green

'[font #2e1787]','[/font]' //34 blue
);

imageTag = false;
// Shows the help messages in the helpline window

function helpline(help) {

//alert('helpline: '+help);

// frm = getForm();

document.getElementById('helpbox').value=eval(help + "_help");

// frm.helpbox.value = eval(help + "_help");

}


// Replacement for arrayname.length property

function getarraysize(thearray) {

for (i = 0; i < thearray.length; i++) {

if ((thearray[i] == "undefined") || (thearray[i] == "") || (thearray[i] == null))

return i;

}

return thearray.length;

}
// Replacement for arrayname.push(value) not implemented in IE until version 5.5

// Appends element to the array

function arraypush(thearray,value) {

thearray[ getarraysize(thearray) ] = value;

}
// Replacement for arrayname.pop() not implemented in IE until version 5.5

// Removes and returns the last element of an array

function arraypop(thearray) {

thearraysize = getarraysize(thearray);

retval = thearray[thearraysize - 1];

delete thearray[thearraysize - 1];

return retval;

}




function bbstyle(bbnumber, arg) {

var txtarea = getTxtarea();
txtarea.focus();

donotinsert = false;

theSelection = false;

bblast = 0;
if (bbnumber == -1) { // Close all open tags & default button names

while (bbcode[0]) {

butnumber = arraypop(bbcode) - 1;

txtarea.value += bbtags[butnumber + 1];

deactivateButton(butnumber);

}

imageTag = false; // All tags are closed including image tags :D

txtarea.focus();

return;

}
if ((clientVer >= 4) && is_ie && is_win)

{

theSelection = document.selection.createRange().text; // Get text selection

if (theSelection) {

// Add optional argument to the tag

opentag = bbtags[bbnumber];

if (arg) {

opentag = opentag.substring(0, opentag.length-1) + '=' + arg + ']';

}
// Add tags around selection

document.selection.createRange().text = opentag + theSelection + bbtags[bbnumber+1];

txtarea.focus();

theSelection = '';

return;

}

}

else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))

{

mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1], arg);

return;

}
// Find last occurance of an open tag the same as the one just clicked

for (i = 0; i < bbcode.length; i++) {

if (bbcode[i] == bbnumber+1) {

bblast = i;

donotinsert = true;

}

}
if (donotinsert) { // Close all open tags up to the one just clicked & default button names

while (bbcode[bblast]) {

butnumber = arraypop(bbcode) - 1;

txtarea.value += bbtags[butnumber + 1];

deactivateButton(butnumber);

imageTag = false;

}

txtarea.focus();

return;

} else { // Open tags
if (imageTag && (bbnumber != 14)) { // Close image tag before adding another

txtarea.value += bbtags[15];

lastValue = arraypop(bbcode) - 1; // Remove the close image tag from the list

deactivateButton(14);

imageTag = false;

}
// Open tag

// Add optional argument to the tag

opentag = bbtags[bbnumber];

if (arg) {

opentag = opentag.substring(0, opentag.length-1) + '=' + arg + ']';

}

txtarea.value += opentag;

if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag

arraypush(bbcode,bbnumber+1);

activateButton(bbnumber);

txtarea.focus();

return;

}

storeCaret(txtarea);

}
function activateButton(btnnr) {

frm = getForm();

btn = eval('frm.addbbcode' + btnnr);

if (btn.type == 'button') {

btn.value += '*';

}

}
function deactivateButton(btnnr) {

frm = getForm();

btn = eval('frm.addbbcode' + btnnr);

if (btn.type == 'button') {

btn.value = btn.value.substr(0,(btn.value.length - 1));

}

}
// From [url=http://www.massless.org/mozedit/]http://www.massless.org/mozedit/ [/url]

function mozWrap(txtarea, open, close, arg)

{

// Add optional argument to the tag

opentag = open;

if (arg) {

opentag = opentag.substring(0, opentag.length-1) + '=' + arg + ']';

}
var selLength = txtarea.textLength;

var selStart = txtarea.selectionStart;

var selEnd = txtarea.selectionEnd;

if (selEnd == 1 || selEnd == 2)

selEnd = selLength;
var s1 = (txtarea.value).substring(0,selStart);

var s2 = (txtarea.value).substring(selStart, selEnd)

var s3 = (txtarea.value).substring(selEnd, selLength);

txtarea.value = s1 + opentag + s2 + close + s3;

return;

}
// Insert at Claret position. Code from

// [url=http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130]h ttp://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130[/url]

function storeCaret(textEl) {

if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();

}


/*

function bbfontstyle(bbopen, bbclose) {

var txtarea = getTxtarea();
if ((clientVer >= 4) && is_ie && is_win) {

theSelection = document.selection.createRange().text;

if (!theSelection) {

txtarea.value += bbopen + bbclose;

txtarea.focus();

return;

}

document.selection.createRange().text = bbopen + theSelection + bbclose;

txtarea.focus();

return;

}

else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))

{

mozWrap(txtarea, bbopen, bbclose);

return;

}

else

{

txtarea.value += bbopen + bbclose;

txtarea.focus();

}

storeCaret(txtarea);

}*/

Thank you!

Anyway, too big code for a small board.

Additionally, it doesn't control our "Quote" tag (when you highlight the text and click on "Quote") and it doesn't control Username bold tag, when you click on Username.