[ASP.net & js] richtexteditor

[Supermario16]

ik op codeplex een richtexteditor voor asp.net gevonden:
http://www.codeplex.com/rte
Deze heb ik geprobeerd te configureren zoals op de diverse fora wordt aangegeven. Ik heb echter een probleem waar meerdere mensen tegen aan lopen. Natuurlijk heb ik de diverse oplossingen geprobeerd maar tot nu toe geen succes.

Bij een normale asp.net textbox kun je:

code:

string html = Textbox1.text;

Bij de rte werkt dit in eerste instantie niet. Je moet een stukje javascript uitvoeren die ervoor zorgt dat de tekst vanuit de client naar de server wordt gestuurd:

code:

function dosub()
{
editor = top.document.getElementById(editorId);
editor.value = richeditor.toHtmlString();
}

Nu wordt aangeraden deze code bij elke submit uit te voeren, maar omdat mijn pagina ook navigatie knoppen met een multiview bevat werkt dit niet en krijg ik een js foutmelding waardoor mijn multiview niet bijgewerkt wordt.

Ik heb het nu opgelost door een extra html input button te plaatsen welke dit stukje code uitvoert. De gebruiker moet daarna echter op een linkbutton klikken om de gegevens verder te verwerken. Ik zou dit graag onder 1 knop hebben, wat wil zeggen:

Ik moet de javascript functie op een andere manier aanroepen, voordat de submit wordt gedaan voor de linkbutton, zodat de gebruiker niet 2x hoeft te klikken.

Iemand ideeen / ervaringen met dit controll?

[crisp]

en krijg ik een js foutmelding

Wat voor foutmelding?

Ik weet geen kont van ASP, doet dat nog steeds alles via ranzige posts dmv een formulier om de hele pagina heen? Iig zou je dat stukje code in het onsubmit event van het juiste formulier moeten zien te stoppen (al zou de rte code dat natuurlijk ook zelf kunnen doen).

Waar komen 'editorId' en 'richeditor' eigenlijk vandaan? zijn dat globals? Het lijkt me sowieso raadzaam die eerst te checken op hun bestaan alvorens daar dingen mee te doen.

[ Voor 5% gewijzigd door crisp op 15-08-2008 09:38 ]

[beany]

crisp schreef op vrijdag 15 augustus 2008 @ 09:37:
Ik weet geen kont van ASP, doet dat nog steeds alles via ranzige posts dmv een formulier om de hele pagina heen?

Jep, helaas wel...

[Bosmonster]

ASP.NET Webforms \o/

Ook wel Web 0.5 genoemd..

Denk dat je meer succes hebt in Programming, want met frontend development heeft het weinig meer te maken imho.

[ Voor 53% gewijzigd door Bosmonster op 15-08-2008 10:34 ]

[Supermario16]

offtopic:
Ik zou het iig op prijs stellen als jullie alleen inhoudelijk reageren in plaats een bepaalde methode af te kraken. bvd

De sourcecode van de rte is via codeplex beschikbaar maar kon zo snel niet uitmaken waar die 2 objecten vandaan komen. Is op het discussie forum van rte ook bar weinig over te vinden moet ik zeggen.

De volgende js fout geeft IE na de eerste submit:

code:

Line: 109
Char: 13
Error: editorld is undefined
Code: 0
URL: http://www.......

Line 109 op aspx pagina:

code:

editor = top.document.getElementById(editorId);

[ Voor 0% gewijzigd door Supermario16 op 15-08-2008 10:58 . Reden: typo ]

[crisp]

Op de demopage zie ik dat eea inderdaad nogal obtrusive gedaan wordt:

HTML:

<input type="submit" onclick="CopyText()" value="Post" />

Persoonlijk zou ik het zo aanpakken (aanpassing in RteStartup.js), dan is die onclick ook overbodig:

JavaScript:

function InitRte()
{
    selCurrent = null;  
    csLock = null;
    blnRefresh = false;
    blnLock = false;
    bookmark = null;
    caretpos = null;
    pos = 0;
    blnMarkedCodeBlock = false;

    browser = { 
        version: parseInt(navigator.appVersion),
        isNetscape: navigator.appName.indexOf("Netscape") != -1,
        isMicrosoft: navigator.appName.indexOf("Microsoft") != -1
    };

    var editor = top.document.getElementById(editorId);
    if (editor)
    {
        // Get the initial contents for the RichTextEditor from what is there in the textarea
        contents = editor.value;

        editor.style.display = 'none';

        // Build the document contents for the RichTextEditor
        links = "<link rel=\"stylesheet\" type=\"text/css\" href='" + editCssUrl + "'>";
        if(!contents)
            htmltxt = '<html><head>' + links + '</head><body>' + "<div style=\"font-family:arial;font-size:10pt;\"></div>" + '</body></html>';
        else
            htmltxt = '<html><head>' + links + '</head><body>' + contents + '</body></html>';

        //Testing the Object version - Still a work in progress
        richeditor = new RichTextEditor(RichEditId);
        if(RteMsg2)
            richeditor.SelectCBMsg = RteMsg2;
        if(RteMsgCodeBlock)
            richeditor.CodeBlockStr = RteMsgCodeBlock;

        richeditor.SetContent(htmltxt);
        richeditor.EditMode = true;

        var rteElem = document.getElementById(RteId);
        var p = document.body.lastChild;

        //Color
        ColorDialog = new Microsoft.js.ui.ColorPicker();
        ColorDialog.Hide();

        p.appendChild(ColorDialog.uiElement);

        ColorDialog.SubscribeToOnChange(OnColorChange);

        //Emoticon
        EmoticonDialog = new Microsoft.js.ui.EmoticonPicker();
        EmoticonDialog.Hide();

        p.appendChild(EmoticonDialog.uiElement);

        EmoticonDialog.SubscribeToOnChange(OnEmoticonChange);

        HyperLinkDialog = new Microsoft.js.ui.HyperLinkDialog();
        p.appendChild(HyperLinkDialog.uiElement);
        HyperLinkDialog.SubscribeToOnChange(SetHyperLink);

        toolb = this[RteToolbarId];

        // This was causing the control to steal focus on page load when it was loaded
        // with an empty Text property.
        // TODO: The benefit of not having this control steal focus is greater than
        // setting the initial state of the FontSize and Justify buttons. Still it
        // would be good have the initial button states be correct. - yorkrj
        /*if(!contents)
        {
            OnFontSizeChange(lastFontSize);
            SetDefaultJustify();
        }*/

        // Add relationship to buttons.
        RteJustifyLeft.AddRelatedButton(RteJustifyCenter);
        RteJustifyLeft.AddRelatedButton(RteJustifyRight);
        RteJustifyCenter.AddRelatedButton(RteJustifyLeft);
        RteJustifyCenter.AddRelatedButton(RteJustifyRight);
        RteJustifyRight.AddRelatedButton(RteJustifyLeft);
        RteJustifyRight.AddRelatedButton(RteJustifyCenter);

        RteUnorderedList.AddRelatedButton(RteOrderedList);
        RteOrderedList.AddRelatedButton(RteUnorderedList);

        if(browser.isMicrosoft)
        {
            this.MouseUp = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'mouseup', 'OnMouseUp', this, false);
            this.KeyUp = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'keyup', 'OnKeyUp', this, false);

            Microsoft.js.event.EventManager.add(this.MouseUp);
            Microsoft.js.event.EventManager.add(this.KeyUp);

            this.KeyDown = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'keydown', 'StopBack', this, false);
            Microsoft.js.event.EventManager.add(this.KeyDown);

            RteHyperLink.SetState("Greyed");
        }
        else
        {
            this.MouseUp = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'mouseup', 'UpdateToolBar', this, false);
            this.KeyUp = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'keyup', 'UpdateToolBar', this, false);

            this.KeyDown = new Microsoft.js.event.EventHandler(richeditor.GetDocument(), 'keydown', 'OnFireFoxRteMenu', this, false);
            Microsoft.js.event.EventManager.add(this.KeyDown);

            Microsoft.js.event.EventManager.add(this.MouseUp);
            Microsoft.js.event.EventManager.add(this.KeyUp);
        }

        if(RteFgColor.uiElement)
            RteFgColor.uiElement.style.backgroundColor = "#000000";

        toolb.UpdateState();

        // add submit handler
        if(editor.form)
        {
            this.Submit = new Microsoft.js.event.EventHandler(editor.form, 'submit', 'CopyText', this, false);
            Microsoft.js.event.EventManager.add(this.Submit);
        }
    }
}

(not tested)

Het blijft verder qua js een rommeltje; geen in-scope variabele declaraties waardoor alle variabelen global zijn (waardoor meerdere instanties van een RTE object feitelijk al onmogelijk is). Houdt geen handle bij naar de originele textarea waardoor er elke keer weer nodeloze lookups gedaan moeten worden, vieze browsersniffing, en ga zo maar door.
Maar goed, dat was ook wel te verwachten van Microsoft software

[storeman]

Geen idee of je nog kunt of wilt switchen, maar FCKeditor biedt ook ondersteuning voor ASP, wellicht dat dit eenvoudiger werkend te krijgen is.

http://www.fckeditor.net

[crisp]

Bosmonster schreef op vrijdag 15 augustus 2008 @ 10:33:
ASP.NET Webforms \o/

Ook wel Web 0.5 genoemd..

idd

Denk dat je meer succes hebt in Programming, want met frontend development heeft het weinig meer te maken imho.

De oplossing is echter enkel clientside te doen: je wilt immers dat bij een postback de CopyText() javascript functie (automatisch) wordt uitgevoerd...

[TeeDee]

Zoals storeman aangeeft: pak FCK, of in ieder geval een fatsoenlijke editor. Deze RTE maakt pure bagger aan.

[Bosmonster]

crisp schreef op vrijdag 15 augustus 2008 @ 11:39:
[...]

De oplossing is echter enkel clientside te doen: je wilt immers dat bij een postback de CopyText() javascript functie (automatisch) wordt uitgevoerd...

Ja sorry je hebt gelijk, ik word altijd wat sarcastisch van Webforms problemen.

[SuperRembo]

Supermario16 schreef op vrijdag 15 augustus 2008 @ 09:23:
[...]
Ik moet de javascript functie op een andere manier aanroepen, voordat de submit wordt gedaan voor de linkbutton, zodat de gebruiker niet 2x hoeft te klikken.

Iemand ideeen / ervaringen met dit controll?

Kan je dat niet gewoon via de onclientclick property van de button regelen?

[crisp]

SuperRembo schreef op vrijdag 15 augustus 2008 @ 12:59:
[...]


Kan je dat niet gewoon via de onclientclick property van de button regelen?

Nee, dat is niet de juist plek voor een submit handler die altijd uitgevoerd dient te worden ongeacht hoe het formulier wordt verstuurd. Een form-element heeft een speciaal onsubmit event-attribuut (met bijbehorend DOM event) dat daarvoor bedoelt is, onclick op een submitbutton is gewoon fout (en werkt ook niet op een ASP site waar elke viewstate change actie uiteindelijk (via javascript?) een submit is waarbij de onclick van een eventuele submitbutton (of meerdere) niet getriggered wordt.

[ Voor 19% gewijzigd door crisp op 15-08-2008 13:07 ]

[SuperRembo]

Ja klopt, slordig gelezen. Ik veronderstelde dat hij bij die linkbutton wat extra's wilde doen.