Hack: Multiple RTE textareas (wip) - Web Wiz Support and Community Forums

Hello, i was in need to use this excellent script with multiple textareas with RTE
functionality. It's a hardhack in the code to add this functionality. At the moment
it loads fine with 2 or more textareas with rte functionality.

Fontblock, size, type, bold, i, u, over, justify, textcolor, backcolor, works fine
with both textareas. Each textarea has it own toolbar next to it as usual.
I just have some more tweaks until everything works.

I will send Web Wiz author my edited version if he wants to have a look
once its finished. Maybe something for future updates.

Provided a printscreen, but is realy fugly atm.

WebWiz-Bruce wrote:

Have been looking at a way to do this and still keep the software simple to implement. It would be interesting to see how you have done this and if it keeps the software easy to implement.

Of course, ill finish up asap and ill send you a copy :)
Its not pretty atm, but here is some of what i have done.

Ïnit multiple
I will later fix so that initialiseWebWizRTE can take multiple textareas as an array or something
<body onload="initialiseWebWizRTE('field_wyziwyg');initialiseWebWizRTE('field_wyziwyg2')...

Then every object, function, toolbar, toolbarbutton passes along the current textarea that we are working with. Here is some examples, on how the iframes are named:

<script language="JavaScript" src="RTE_javascript.asp?textArea=<%=strTextAreaName%>" type="text/javascript"></script>

<iframe width="260" height="165" id="colourPalette_<%=strTextAreaName%>" src="includes/RTE_iframe_colour_palette.asp?textArea=<%=strTextAreaName%>" style="visibility:hidden; position: absolute; left: 0px; top: 0px;" frameborder="0" scrolling="no"></iframe>
<iframe width="260" height="280" id="formatFont_<%=strTextAreaName%>"    src="includes/RTE_iframe_select_format.asp?textArea=<%=strTextAreaName%>" style="visibility:hidden; position: absolute; left: 0px; top: 0px; border: 1px solid #000000;" frameborder="0" scrolling="yes"></iframe>
<iframe width="130" height="208" id="fontSelect_<%=strTextAreaName%>"    src="includes/RTE_iframe_select_font.asp?textArea=<%=strTextAreaName%>"    style="visibility:hidden; position: absolute; left: 0px; top: 0px; border: 1px solid #000000;" frameborder="0" scrolling="no"></iframe>
<iframe width="220" height="259" id="textSize_<%=strTextAreaName%>"      src="includes/RTE_iframe_select_size.asp?textArea=<%=strTextAreaName%>"    style="visibility:hidden; position: absolute; left: 0px; top: 0px; border: 1px solid #000000;" frameborder="0" scrolling="no"></iframe>

<script language="JavaScript">
function WebWizRTEtoolbarnalf(formName){
    document.writeln('<table id="toolbar_<%=strTextAreaName%>" width="680" border="0" cellspacing="0" cellpadding="1" class="RTEtoolbar">');
    document.writeln(' <tr>');
    document.writeln(' <td>');
    
    document.writeln(' </td>');
    document.writeln(' </tr>');
    document.writeln('</table>');
}

WebWizRTEtoolbarnalf('<%=strTextAreaName%>');

That way we have unique iframes and toolbar ids for each textarea associated with it.

Now i have to edit each function everywhere, for example in RTE_javascript.asp
function FormatText(command, option, textareanalf){
Here i have added the variable that passes
the textarea id and its used below in the function like this:
document.getElementById('RTE_' + textareanalf).contentWindow.document.execCommand("useCSS", false, option);

    var editor = document.getElementById('RTE_' + textareanalf);

    //Show iframes
    if ((command == 'forecolor_' + textareanalf) || (command == 'backcolor_' + textareanalf) || (command == 'hilitecolor_' + textareanalf) || (command == 'fontname_' + textareanalf) || (command == 'formatblock_' + textareanalf) || (command == 'fontsize_' + textareanalf)){
        parent.command = command;
        buttonElement = document.getElementById(command);
        switch (command){

case 'fontname_' + textareanalf: iframeWin = 'fontSelect_' + textareanalf; break;

            case 'formatblock_' + textareanalf: iframeWin = 'formatFont_' + textareanalf; break;
            case 'fontsize_' + textareanalf: iframeWin = 'textSize_' + textareanalf; break;
            default: iframeWin = 'colourPalette_' + textareanalf;
        }

As you can see its not pretty atm :)
But as every command and button on the toolbar passes
the id of textarea it knows where to do what :)

Here is how the hideIframes function is edited to work:
//Function to hide iframes
function hideIframes(textareanalf)
{
if (document.getElementById('colourPalette_' + textareanalf).style.visibility=='visible'){document.getElementById('colourPalette_' + textareanalf).style.visibility='hidden';}
if (document.getElementById('formatFont_' + textareanalf).style.visibility=='visible'){document.getElementById('formatFont_' + textareanalf).style.visibility='hidden';}
if (document.getElementById('fontSelect_' + textareanalf).style.visibility=='visible'){document.getElementById('fontSelect_' + textareanalf).style.visibility='hidden';}
if (document.getElementById('textSize_' + textareanalf).style.visibility=='visible'){document.getElementById('textSize_' + textareanalf).style.visibility='hidden';}
}

And in RTE_toolbar_inc.asp i have also added the textarea ud,
'Font type toolbar
'------------
If blnFontStyle OR blnFontType OR blnFontSize Then Response.Write(vbCrLf & "    document.writeln('<img src=""" & strRTEImagePath & "toolbar_separator.gif"" align=""absmiddle"" />")
'Font Style
If blnFontStyle Then Response.Write("<img id=""formatblock_" & strTextAreaName & """ src=""" & strRTEImagePath & "post_button_format.gif"" align=""absmiddle"" border=""0"" title=""" & strTxtFontStyle & """ onClick=""FormatText(\'formatblock_" & strTextAreaName & "\', \'\', \'" & strTextAreaName & "\')"" class=""WebWizRTEbutton"" />")
'Font Type
If blnFontType Then Response.Write("<img id=""fontname_" & strTextAreaName & """ src=""" & strRTEImagePath & "post_button_font.gif"" align=""absmiddle""

WebWiz-Bruce wrote:

Very nice seems to work Smile

Cool :) You will surely do better code than me with your expertise =)

hellooo.i am an old member but forgot my pass and email and ... far far away
i have Same problem With more than one Text Area RTE enabled,there is some Bugs
1: i your set multiple includes for more than 1 text area you will reach Syntax error on Private Function Because it Reloaded twice.then you need to move included Files in head of included file for each text area to main page head.
and now it shows up tool bar for each text area but each tool bar set for last text area,...
my proggy make forms dynamicaly and have many text areas.