Ik ben momenteel bezig aan een eigen wysiwyg editor en heb de basis ver af. Tot nog toe heb ik alle functionaliteit die ik wilde hebben kunnen vinden op het internet. Echter ben ik nu tegen een probleem aangelopen wat ik niet kan vinden.
Om te beginnen zal ik een kleine uitleg geven, bij het uploaden van een afbeelding word deze door de server geresized, en een verwijzing naar de bestanden in de database opgenomen. Op het moment dat er een webpagina opgehaald word waarin een afbeelding zit, word de locatie van de afbeelding opgehaald en vertaald naar een standaard link.
Om een webpagina te bewerken ben ik een editor aan het bouwen. Deze maakt gebruik van de functionaliteiten van doc.designMode (ik weet de officiele naam even niet, maar hoop dat dit duidelijk is).
Nu wil ik naast de wysiwyg mode ook de mogelijkheid hebben om de html rechtstreeks te bewerken. Momenteel heb ik devolden (relevante) code
Hierin is "value" de content van de betreffende pagina, welke uit de database gehaald word, en door javascript nabewerkt word om correct weergegeven to worden.
Even een voorbeeld :
In de database staat
In html-mode is er geen probleem, en komt precies deze tekst op het scherm te staan. In wysiwyg mode moet er echter wel vertaald worden. Daar wil ik immers de afbeelding laten zien. Momenteer word bovenstaande code als volgt vertaald :
Voor het weergeven is dit prima, de afbeelding word netjes in de wysiwyg mode getoont, en ik bewaar de orginele code (=[afbeelding_1]) zonder dat deze in wysiwyg mode getoont word. <-- --> is immers html-commentaar.
Als de pagina bewerkt is en weer in de database opgeslagen moet worden is terugvertalen erg makkelijk, ik zoek mijn begin en eindtag van de afbeelding op <--[afbeelding]--> ... <--[afbeelding]end--> gooi dat hele stuk weg en vervang het door [afbeelding].
Tot zover gaat alles goed. Nu komt het probleem waar ik tegenaanloop,
Op het moment dat er met de afbeelding gesleept word in het wysiwyg venster, splits deze het commentaat van de begin en eind-tag. In code doet hij
Vraag 1: Hoe zorg ik ervoor dat hij bij verslepen de begin en eind-tag meeneemt?
Of weet iemand een slimmere manier om de orginele tag te bewaren. Achteraf de gegenereerde html terugvertalen naar interne codes is geen optie. De tag bevat namelijk ook info of de afbeelding ergens naar toe moet linken etc.
Vraag 2: Ik wil dat als er met de de rechtermuisknop op de afbeelding geklikt word een menu getoont word, waarmee ik instellingen aan de betreffende afbeelding kan doen. Waar kan ik ergens een goed voorbeeld vinden van hoe dit moet?
Binnen mijn editor zouden afbeeldingen dan met de linkerknop verplaatst kunnen worden, en met de rechtermuisknop gepositioneerd (links / mindden / rechts)
Om te beginnen zal ik een kleine uitleg geven, bij het uploaden van een afbeelding word deze door de server geresized, en een verwijzing naar de bestanden in de database opgenomen. Op het moment dat er een webpagina opgehaald word waarin een afbeelding zit, word de locatie van de afbeelding opgehaald en vertaald naar een standaard link.
Om een webpagina te bewerken ben ik een editor aan het bouwen. Deze maakt gebruik van de functionaliteiten van doc.designMode (ik weet de officiele naam even niet, maar hoop dat dit duidelijk is).
Nu wil ik naast de wysiwyg mode ook de mogelijkheid hebben om de html rechtstreeks te bewerken. Momenteel heb ik devolden (relevante) code
Code:
<scipt>
doc.designMode = "on";
function wysiwygmode() {
doc.body.innerHTML = "value"
}
function htmlmode() {
doc.body.textContent = "value"
}
</script>
Hierin is "value" de content van de betreffende pagina, welke uit de database gehaald word, en door javascript nabewerkt word om correct weergegeven to worden.
Even een voorbeeld :
In de database staat
Code:
<p>alinea 1</p>
[afbeelding_1]
<p>alinea 2</p>
Code:
<p>alinea 1</p>
<--[afbeelding_1]--><IMG alt="" src="http://etc."><--[afbeelding_1]end-->
<p>alinea 2</p>
Als de pagina bewerkt is en weer in de database opgeslagen moet worden is terugvertalen erg makkelijk, ik zoek mijn begin en eindtag van de afbeelding op <--[afbeelding]--> ... <--[afbeelding]end--> gooi dat hele stuk weg en vervang het door [afbeelding].
Tot zover gaat alles goed. Nu komt het probleem waar ik tegenaanloop,
Op het moment dat er met de afbeelding gesleept word in het wysiwyg venster, splits deze het commentaat van de begin en eind-tag. In code doet hij
Code:
<p>alinea 1</p>
<--[afbeelding_1]--><--[afbeelding_1]end-->
<p>alinea 2</p>
<IMG alt="" src="http://etc.">
<p>alinea 3</p>
Vraag 1: Hoe zorg ik ervoor dat hij bij verslepen de begin en eind-tag meeneemt?
Of weet iemand een slimmere manier om de orginele tag te bewaren. Achteraf de gegenereerde html terugvertalen naar interne codes is geen optie. De tag bevat namelijk ook info of de afbeelding ergens naar toe moet linken etc.
Vraag 2: Ik wil dat als er met de de rechtermuisknop op de afbeelding geklikt word een menu getoont word, waarmee ik instellingen aan de betreffende afbeelding kan doen. Waar kan ik ergens een goed voorbeeld vinden van hoe dit moet?
Binnen mijn editor zouden afbeeldingen dan met de linkerknop verplaatst kunnen worden, en met de rechtermuisknop gepositioneerd (links / mindden / rechts)