WYSIWYG Editor til asp

Der er normalt lavet i JS, og er derfor serverside uafhængig. Du kan f.eks hente tinyMCE:
http://tinymce.moxiecode.com

Den omdanner et hvilken som helst form felt du ønsker til et WYSIWYG. Og data blive så submittet på normal vis.

Et lille eks, jeg har bikset sammen, ud fra deres eksempler:

<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "simple"
    });
</script>

<form method="post" action="save.asp">
<input type="Text" name="headline" value="">
<textarea id="body" name="body" rows="10" cols="40">
Noget tekst her
Mere tekst...
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>

Det er så bare at læse post data på save.asp siden:
<%
headline = request.form("headline")
body = request.form("body")
%>

Ok men hvor er alle de editors, alle de tegn man kan bruge som centerer tekst left right, font size osv. ?

Nu valgte jeg at bruge den simple udgave som eks her. Hvis du kikke under "Examples" på hjemme siden kan du se den i forskellige udgaver:
http://tinymce.moxiecode.com/example_full.php?example=true

Den er fuld editerbar. Du kan altså selv bestemme hvilke funktioner det skal være muligt at bruge.

Jeg prøver at få den dskrevet sådan, men får ikke de der editors med ???



<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
        elements : "elm1,elm2",
        save_callback : "customSave",
        content_css : "example_advanced.css",
        extended_valid_elements : "a[href|target|name]",
        plugins : "table",
        theme_advanced_buttons3_add_before : "tablecontrols,separator",
        //invalid_elements : "a",
        theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
        //execcommand_callback : "myCustomExecCommandHandler",
        debug : false
    });

    // Custom event handler
    function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
        var linkElm, imageElm, inst;

        switch (command) {
            case "mceLink":
                inst = tinyMCE.getInstanceById(editor_id);
                linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

                if (linkElm)
                    alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
                else
                    alert("Link dialog has been overriden.");

                return true;

            case "mceImage":
                inst = tinyMCE.getInstanceById(editor_id);
                imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

                if (imageElm)
                    alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
                else
                    alert("Image dialog has been overriden.");

                return true;
        }

        return false; // Pass to next handler in chain
    }

    // Custom save callback, gets called when the contents is to be submitted
    function customSave(id, content) {
        alert(id + "=" + content);
    }
</script>
<!-- /tinyMCE -->

<form method="post" action="editor.asp">
<input type="Text" name="headline" value="">
<textarea name="elm1" rows="10" cols="40">ASDASD</textarea>
<br />
<input type="button" name="save" value="save" onclick="tinyMCE.triggerSave();" />
<input type="reset" name="reset" value="Reset" />
</form>

ok men når jeg også bruger den du har lavet den simple, får jeg ikke de der editors med, hvor er fejlen ?

Du skal have styr på attributterne på editoren. Jeg har en advanceret udgave, hvor jeg har disse med:

tinyMCE.init(
{
    mode : "exact",
    elements : "body",
    theme : "advanced",
    theme_advanced_buttons1 : "fontselect, fontsizeselect, separator, bold, italic, underline, justifyleft, justifycenter, justifyright, bullist, numlist",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    plugins : "preview",
    theme_advanced_buttons1_add : "preview",
    plugin_preview_width : "700",
    plugin_preview_height : "600",
    inline_styles : true,
    table_inline_editing : true,
    force_br_newlines : true,
    theme_advanced_fonts : "Verdana=Verdana; Arial=Arial; Helvetica=Helvetica; sans-serif=sans-serif",
    visual : false
   
})
</script>

Vær opmærksom på disse to:
mode : "exact",
elements : "body",

Mode fortæller hvordan den skal finde elementern. "exact" betyder på elementets ID. Det kunne også have været "textareas" hvilke ville have gjort alle textareas til en editor. Når mode er "exact" skal der er elements på som så fortæller hvilke elementer den skal lave til en editor.

Du skal altså rette "body" i:
elements : "body",

Til ID'et på elementet, eller hvis du kun har et textarea kan du slette elements og rette mode til:
mode : "textareas",

Det var da den forkert jeg fik klippet ind. Det var min simple advancert udgave. Dette er den fulde advanceret jeg har:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
    theme_advanced_buttons1_add_before : "save,separator",
    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
    theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
    theme_advanced_buttons3_add_before : "tablecontrols,separator",
    theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    plugin_insertdate_dateFormat : "%Y-%m-%d",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    external_link_list_url : "example_data/example_link_list.js",
    external_image_list_url : "example_data/example_image_list.js",
    flash_external_list_url : "example_data/example_flash_list.js"
});

Bemærk min mode i dette tilfælde. Jeg har kun et textarea på siden, så den står til "textareas". Kunne også have været en "exact".

ok jeg får textarea frem, men ingen editors?????

Har du lagt kildekoden fra tineMCE ind i de rigtigere mapper på dit webhotel? Så dit script linker til tiny_mce.js rigtigt:

<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>

er det kun "tiny_mce.js" filen der skal ligge på min webhotel ikke de andre filer som Image mappe osv.?

Du skal have de andre mapper med også.

Der ligger alle billederne og flere af funktionskaldene.

det er underligt, jeg har flyttet hele mappen op på min webhotel, og testet den der, men jeg får kun textarea frem :S

Det skal ligge i den rigtige struktur. Nu er det ved at være en gammel version jeg kører, så jeg kan ikke sige om der er ændret på mapperne, men dette er min struktur:

/cms/tiny_mce/langs
/cms/tiny_mce/plugins
/cms/tiny_mce/themes
/cms/tiny_mce/utils
/cms/tiny_mce/tiny_mce.js
/cms/page.asp

I page.asp er scriptet så:
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

fordi jeg har alle editor filerne liggende i tiny_mce undermappen. Kunne også have set sådan ud:
/cms/langs
/cms/plugins
/cms/themes
/cms/utils
/cms/tiny_mce.js
/cms/page.asp

Så havde koden i page.asp været:
<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>

Tak nu køre det, jeg havde ikke alle mapper med :D

.o) <-- One Eyed Jack

lige en ting mere, hvad hvis man i body form, skriver noget tekst med et billede,

hvor gemmes billedet???