[JS/IE7/FF] WYSIWYG - pasteHTML

[orange.x]

Ik zal even bij het begin beginnen:

Ik ben bezig met het maken van mijn eigen CMS. Waarom niet bestaande gebruiken? Veel te uitgebreid en moeilijk om te begrijpen als je dus functies toe wilt voegen of veranderen.

Het hele CMS functioneert eigenlijk al, ik kan met soort UBB codes werken en daarmee headings maken en bold etc. Maar ik wil nu eigenlijk de overstap maken naar een WYSIWYG editor.

Na al heel veel gekloot met javascript en alle gedoe eromheen ben ik eindelijk zover dat ik de basisfunctionaliteit werkend heb in IE en FF ( beide laatste versies ).

Mijn probleem begint nu voor bijvoorbeeld de hyperlink. Wat ik al voor elkaar heb in IE is dat als ik op de knop klik ik op de plek van de cursor een stuk tekst geplakt krijg.

Ohja, ik wil dus gebruik maken van pasteHTML en niet van execCommand("createlink"..) omdat ik een target toe wil kunnen voegen.

Ik heb al veel gezeur gehad met het laten werken van de knoppen bold italic etc. Dus ik ben al heel blij dat dat werkt in IE en FF. Maar nu zit ik dus tegen ongeveer hetzelfde probleem bij de pasteHTML.

Ik heb het volgende form op mijn site staan:

PHP:

    <div class="text">
        Verander hieronder de tekst dat hoort bij menu-item: <? echo"$get_name"; ?><br /><br />
        <form action="javascript:save()" method="post">
            <script language="javascript" type="text/javascript" src="cms_inc/richtext.js"></script>
            <div id="toolbar"><? include('cms_inc/richtext_toolbar.php'); ?></div>
            <iframe id="iframe" name="iframe" onload="start()" frameborder="0" marginheight="0" height="300" width="600" src="cms_inc/cms_show_text.php?name=<? echo"$get_name"; ?>" ></iframe> 
            <input type="submit" name="do" value="Wijzig tekst" />
        </form>
        <form action="index.php?action=<? echo"$get_action"; ?>&amp;step=2&amp;name=<? echo"$get_name"; ?>" method="post" id="save" style="display: none;">
            <textarea name="text" id="text"></textarea>
        </form>
    </div>

Vervolgens heb ik dus dit javascriptbestand:

JavaScript:

function start() { 
    iframe.document.designMode = 'On'; 
}
function text_edit(command,ext) {
    iframe.document.execCommand(command, false, ext); 
}
function save() { 
 var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML; 
 document.getElementById("text").value = htmlCode; 
 document.getElementById("save").submit(); 
}
function createlink() {
    var bla = document.getElementById('iframe').contentWindow.document.selection.createRange();
    bla.pasteHTML ("HALLO");
}

Waar ik denk dat het probleem zit is op regel 13 van het javascriptbestand. In IE7 werkt het wel, maar in FF krijg ik de melding: Error: document.getElementById("iframe").contentWindow.document.selection has no properties
En deze refereert dus naar de regel die ik al aangaf.

Hoe op te lossen: het "pad" klopt volgens mij niet helemaal ( document.geteElementById.... etc ). Dit probleem heb ik dus ook al gehad met de simpele functies voor bold icm met de execCommand. En nu zit ik dus wederom met hetzelfde probleem. Als ik het pad maak zoals ik bijvoorbeeld bij de functie start() doe dan weigert FF nog steeds terwijl IE gewoon blijft werken.

Wat ik al zelf geprobeerd heb is nakijken hoe andere WYSIWYG editors kunnen en welke werken. Er is er een die werkt al via een popup ( wat uiteindelijk de bedoeling is... ) maar ik heb daarvan de code doorgespit en getracht dit over te zetten naar mijn variant, maar dat mislukte. Verder op google gezocht naar een voorbeeld wat zowel in IE als FF werkt, maar ook dat is mislukt.

Via deze link bijvoorbeeld: http://samples.msdn.micro...xecCommand_CreateLink.htm werkt het in IE dus, maar dat is via het execCommand, maar dit werkt dus in FF niet eens..!

[4of9]

misschien stomme vraag hoor maar waarom maak je het zelf als er perfecte (gratis) alternatieven zijn:

FCKEditor, TinyMCE... (en zo nog wel een paar)

[orange.x]

Zoals ik al aangaf, als je een keer een functie toe wilt voegen of wijzigen dan moet je de code induiken die vaak niet netjes uitgelijnd staat, of waar je niet uit komt.

Sowieso kunnen ze voor mij eigenlijk teveel, en dan moet ik dus uit elke editor de hele boel gaan uitslopen omdat ik mijn tekst niet hoef te centreren ofzo. Het moeten gewoon basisfuncties zijn, font styles etc heb ik allemaal niet nodig, daar heb ik mijn css voor.

Net wel zelf nog een manier gevonden, maar vind hem eigenlijk niet zo netjes:
http://www.codingforums.com/showthread.php?t=62782 deze doet het op een andere manier. Maar vraag me nog steeds af of het niet gewoon mogelijk is dmv de pasteHTML functie.

[Sjoerd]

Ik doe het nog anders, ik vervang de geselecteerde tekst gewoon door dezelfde tekst met een url eraan (die ik opvraag via een prompt), wordt later misschien ook nog wel een popup als ik tijd heb

[orange.x]

Sjoerd schreef op woensdag 05 september 2007 @ 17:36:
Ik doe het nog anders, ik vervang de geselecteerde tekst gewoon door dezelfde tekst met een url eraan (die ik opvraag via een prompt), wordt later misschien ook nog wel een popup als ik tijd heb

Ja het is idd mogelijk om via de execCommand een standaard popup mee te laten komen, maar daar kan je alleen selecteren of je http: wilt, of https: mailto: etc. Maar geen target dus.

Ik ga nu ff eten En daarna proberen of ik die functie die ik zelf hierboven aangaf om kan bouwen tot wat ik wil. Zou moeten kunnen Maar blijft frustrerend dat dat niet gewoon goed samenwerkt en dat IE en FF daar dus zo anders op reageren. Waarschijnlijk ligt het probleem bij IE omdat deze altijd alles al aan zijn laars lapte en er een eigen interpretatie aan gaf.

[Sjoerd]

orange.x schreef op woensdag 05 september 2007 @ 17:56:
[...]

Ja het is idd mogelijk om via de execCommand een standaard popup mee te laten komen, maar daar kan je alleen selecteren of je http: wilt, of https: mailto: etc. Maar geen target dus.

Ik doel helemaal niet op execCommand of iets dergelijks

maar in mijn editor:

JavaScript:

function vervang(oud,nieuw){
tekst=document.getElementById('wysiwyg').contentWindow.document.body.innerHTML;
tekst=tekst.replace(oud,nieuw);
document.getElementById('wysiwyg').contentWindow.document.body.innerHTML=tekst;
codeupdate();
}

Waarbij oud dus de geselecterde tekst is en nieuw de geselecteerde tekst in link is

[Bartoz]

Weet waar je aan begint met een eigen editor, ik gebruik zelf TinyMCE die echt ruim voldoet voor de meeste toepassingen. Daarnaast kun je zelf plug-ins toevoegen:

TinyMCE's functionality can be extended with so-called Plugins.

De standaard functionaliteit vereist feitelijk geen aanpassingen.

[orange.x]

Sjoerd schreef op woensdag 05 september 2007 @ 17:59:
[...]

Ik doel helemaal niet op execCommand of iets dergelijks

maar in mijn editor:

JavaScript:

function vervang(oud,nieuw){
tekst=document.getElementById('wysiwyg').contentWindow.document.body.innerHTML;
tekst=tekst.replace(oud,nieuw);
document.getElementById('wysiwyg').contentWindow.document.body.innerHTML=tekst;
codeupdate();
}

Waarbij oud dus de geselecterde tekst is en nieuw de geselecteerde tekst in link is

Mmmms, die code is inderdaad ook nog wel interessant. Ik ga eens even knutselen!

@Bartoz, ja ziet er leuk en uitgebreid uit Maar echt veel te veel! Probleem is wanneer er meer kan er meer gebruikt gaat worden, wat ik niet wil. Als een 2e gebruiker ineens denkt van oh, ander fontje, andere grootte etc.. Dat gaat gewoon niet werken.

Ik weet ook dat het een hoop werk is om zelf iets te maken, maar voor de functionaliteit die ik wil is er eigenlijk niet zoveel bijzonders vereisd. Wat ik mogelijk maak is bold, italic, underline, ordered list, unordered list, hyperlinkje met target, img waarbij ook upload gedeelte komt ( wat je ook overal mist... dan heb je wel een of andere browser die op je site kan koekeloeren maar daar moet het alsnog wel opkomen, en verder een tabel, en een header1. Dus dan maar even zelf kloten en knutselen. Worden we, tenminste hopen we, slimmer van

[ Voor 38% gewijzigd door orange.x op 05-09-2007 19:01 ]

[imp4ct]

Neem hier ook misschien even een kijkje. Ben zelf ook bezig met een WYSIWYG editor, kunnen elkaar misschien tips geven

URL: [JS - HTML] WYSIWYG - editor

Sjoerd schreef op woensdag 05 september 2007 @ 17:59:
[...]

JavaScript:

function vervang(oud,nieuw){
tekst=document.getElementById('wysiwyg').contentWindow.document.body.innerHTML;
tekst=tekst.replace(oud,nieuw);
document.getElementById('wysiwyg').contentWindow.document.body.innerHTML=tekst;
codeupdate();
}

Kan je hier wat meer duidelijkheid in geven van de codeupdate() functie. Volgens mij werkt body.innherHTML=test enkel in FF en niet in IE of omgekeerd , weet het nietmeer juist, kan mis zijn.

[ Voor 61% gewijzigd door imp4ct op 06-09-2007 08:32 ]

[Sjoerd]

imp4ct schreef op donderdag 06 september 2007 @ 07:48:
[...]
Kan je hier wat meer duidelijkheid in geven van de codeupdate() functie. Volgens mij werkt body.innherHTML=test enkel in FF en niet in IE of omgekeerd , weet het nietmeer juist, kan mis zijn.

Aha we meet again
hier werkt het gewoon in allebei hoor (gebruik ie7 en nieuwste ff)
codeupdate() zorgt er gewoon voor dat mijn textarea met de naam "code" de geupdate html code krijgt...

[imp4ct]

Sjoerd schreef op donderdag 06 september 2007 @ 09:05:
[...]

Aha we meet again
hier werkt het gewoon in allebei hoor (gebruik ie7 en nieuwste ff)
codeupdate() zorgt er gewoon voor dat mijn textarea met de naam "code" de geupdate html code krijgt...

Correct me if I'm wrong.

Maar als'k het goed begrijp update je telkens een "hidden" textarea met de juiste HTML code ? Of is je WYSIWYG een textare ?

[gvanh]

Ik zal me er ook eens tegenaan bemoeien. Ben momenteel ook hard aan het werk met m'n eigen editor. Een van de dingen waar ik in het prille begin tegenaan liep waren die vervelende verwijzingen naar het actuele framedocument. Firefox en IE hebben beide een andere manier van aanspreken van die twee documenten. Om dat te "abstraheren" van je editor, zodat je altijd het goede document hebt, heb ik op een gegeven moment een functie geschreven, zodat je die ellende niet meer hebt. Ook voor het actieve frame window heb ik een functie geschreven. Wellicht heb je er wat aan:

JavaScript:

    /**
     * Get the document in the iframe with the given ID.
     * 
     * @author R.J.T. de Vries <[e-mail]>
     * @param       string      frameId     id of frame to return document of OR frame
     *                                                          element itself.
     * @return  object                          document in the frame requested or false on
     *                                                          failure.
     */
    function getFrameDocument(frameId) {
        var frame;

        if ( frameId.tagName && frameId.tagName.toLowerCase().indexOf('frame') != -1 ) {
            frame = frameId;
        } else {
            frame = document.getElementById(frameId);
        }
        
        if ( !frame )       return false;
        if ( frame.contentWindow )  return frame.contentWindow.document;
        else                                                return frame.document;
    } // getFrameDocument()

JavaScript:

    /**
     * Get the window in the iframe with the given ID.
     * 
     * @author R.J.T. de Vries <[e-mail]>
     * @param   string      aID         id of the iframe that we want the window of.
     * @return  object                      window object in the iframe requested.
     */
    function getFrameWindow(frameId) {
        var frame;
        
        if ( frameId.tagName && frameId.tagName.toLowerCase().indexOf('frame') != -1 ) {
            frame = frameId;
        } else {
            frame = document.getElementById(frameId);
        }
        if ( frame ) return frame.contentWindow;
    } // getFrameWindow()

[Sjoerd]

imp4ct schreef op donderdag 06 september 2007 @ 09:32:
[...]
Correct me if I'm wrong.
Maar als'k het goed begrijp update je telkens een "hidden" textarea met de juiste HTML code ? Of is je WYSIWYG een textare ?

Nee mijn textarea is niet hidden, die staat in een div die geopend of gesloten kan worden zodat de persoon zelf ook nog html code kan tikken indien dit gewenst is

dus
_____________________
|<b>tekst</b> |
|________________ ____|
|tekst |
|________________ ____|

Op die manier dus

[imp4ct]

gvanh schreef op donderdag 06 september 2007 @ 09:43:
Ik zal me er ook eens tegenaan bemoeien. Ben momenteel ook hard aan het werk met m'n eigen editor. Een van de dingen waar ik in het prille begin tegenaan liep waren die vervelende verwijzingen naar het actuele framedocument. Firefox en IE hebben beide een andere manier van aanspreken van die twee documenten. Om dat te "abstraheren" van je editor, zodat je altijd het goede document hebt, heb ik op een gegeven moment een functie geschreven, zodat je die ellende niet meer hebt. Ook voor het actieve frame window heb ik een functie geschreven. Wellicht heb je er wat aan:

dit is goud waard, straks een kijken hoe het juist werkt, maar ik geraak er wel uit denk ik.

Sjoerd schreef op donderdag 06 september 2007 @ 09:45:
[...]

Nee mijn textarea is niet hidden, die staat in een div die geopend of gesloten kan worden zodat de persoon zelf ook nog html code kan tikken indien dit gewenst is

dus
_____________________
|<b>tekst</b> |
|________________ ____|
|tekst |
|________________ ____|

Op die manier dus

Ah, maar je hebt dan nog ergens een veld waar je veld waar de gebruiker ook tekst kan invoegen, die dan ook opmaakt meekrijgt, zo lijk dat tekst die bold moet zijn ook bold wordt getoond op het scherm.

[ Voor 74% gewijzigd door imp4ct op 06-09-2007 15:16 ]

[Sjoerd]

imp4ct schreef op donderdag 06 september 2007 @ 15:13:
[...]
Ah, maar je hebt dan nog ergens een veld waar je veld waar de gebruiker ook tekst kan invoegen, die dan ook opmaakt meekrijgt, zo lijk dat tekst die bold moet zijn ook bold wordt getoond op het scherm.

Nee dat is dat onderste vak

[InZane]

orange.x schreef op woensdag 05 september 2007 @ 18:57:
@Bartoz, ja ziet er leuk en uitgebreid uit Maar echt veel te veel! Probleem is wanneer er meer kan er meer gebruikt gaat worden, wat ik niet wil. Als een 2e gebruiker ineens denkt van oh, ander fontje, andere grootte etc.. Dat gaat gewoon niet werken.

Heb je wel verder gekeken?
De toolbars van TinyMCE of bijvoorbeeld FCKeditor kun je heel gemakkelijk aanpassen/uitkleden.