# InsertImage Funktion - Wie w3c-konform?



## mnbvcxy (5. Juni 2005)

ok, der Reihe nach:

Ich hab einen wysiwyg-editor mit der dhtml (?) geschichte von MS geschrieben (Sprich mit execCommand).
Dabei funktioniert alles so wie ich es mir vorstelle, außer natürlich das einfügen von Bildern   

Grundsätzlich gibt es ja mit  InsertImage die passende Funktion...nur irgendwie wohl nur theoretisch!

Bei der Einstellung User interface=true kommt diese praktische Box, in der alle schönen Einstellungen (alignment, textumfluss, alt-text, etc.) eingetragen werden können! TOLLERWEISE wird als Pfad dann aber der lokale () Pfad gespeichert! Den kann man theoretisch ja noch ersetzen (wobei es doch ziemlich aufwendig wäre). Nur das Bild ist damit aber trotzdem nicht hochgeladen.

Bei der Einstellung User interface=false kann man zwar schön den Pfad übergeben (erst Verzeichniss auslesen, Benutzer wählt aus 'ner Liste das Bild aus, Button -> alles klar!)
Nur damit lassen sich keine Einstellungen vornehmen    
Das Alignement kann man dann zwar mit den Buttons machen, nur Textumfluss und Alternativtext geht nicht Und ohne alt-tag ist die Seite nicht mehr W3C-konform!

Der fehlende Textumfluss ist dabei das allerschlimmste!

Kann man da irgendwas machen
Vorallem soll es ne Lösung sein, die ein unbegabter Nutzer hinbekommen sollte...


[edit]
wenn man es irgendwie schaffen könnte wenigstens html-code in den contenteditable-bereich zu schreiben, wäre ich ja schon glücklich ...


----------



## mnbvcxy (5. Juni 2005)

Das ist echt ärgerlich.
Man kann ja schließlich nicht vom benutzer erwarten, das er die absolute  adresse des Bildes mal eben parat hat und die dann in dem datei-dialog eingibt...

Verdammt!

Wie filter man den einen image-tag aus nem db eintrag raus und fügt ein alt-tag ein? ARGH


----------



## Sven Mintel (6. Juni 2005)

Es gibt in einem Browser genau 1 Möglichkeit, eine Datei auf einen Server hochzuladen:
Das Formularfeld für Dateiupload...da gibt es auch keinen Workaround, der dir helfen könnte....gottseidank.


----------



## mnbvcxy (6. Juni 2005)

nene, das ist absolut nicht das Problem.

Es geht eher um diese ganz spezielle funktion. das ist diese dhtml-geschichte.
bilder uploaden geht damit prinzipiell nicht. es wird halt nur der html-code + pfad etc. gespeichert.

Es ist halt nur so, das es 2 Möglichkeiten gibt:

Einmal einfügen von bildern aus ner liste (z.b. ein Verzeichniss auslesen + formular).
dann fehlt aber das alt-attribut und die bilder können keinen textumfluss.

Oder man nimmt die vorgefertigte Box. Nur dann stimmt der Pfad nicht, AUßER der User tippt den kompletten Pfad nebst http://www... ein.

Es müßte aber theoretisch eine Möglichkeite geben, z.b. das Alt-Attribut in der ersten möglichkeite setzen zu können...

der Bild-upload findet per PHP separat statt (bevor der benutzer überhaupt editiert...)


----------



## Sven Mintel (6. Juni 2005)

Wie jetzt...der Bildupload erfolgt, bevor der Editor zum Einsatz kommt?
Wenn ja... dann könntest du dir deine eigene Funktion zum Einfügen basteln.
Prinzipiell ist ja alles, was im Editor zu sehen ist, normales HTML, welches du mit Javascript beliebig bearbeiten kannst. Du musst dich also nicht auf die CommandIdentifier beschränken.


----------



## mnbvcxy (7. Juni 2005)

hm, sprechen wir exakt über dasselbe?
bisher hab ich leider nicht geschafft, eigenen code per JS da reinzukriegen.


```
function format(command, parameter)
{
  divEditable.focus();
  document.execCommand(command, true, parameter);
}



<a href="javascript:format('JustifyLeft', '');">linksbündig</a>

<div style="width=700; height=500; background-color:white; font-face:Arial; padding:3; border:inset 2px; overflow=auto;" id="divEditable" contenteditable>
TEXT ZUM EDITIEREN
</div>
```

So sieht das z.zt. aus.
Funktioniert mit IE ab version 5.5 sehr gut. nur halt das Bilder-Problem besteht....


----------



## Sven Mintel (8. Juni 2005)

Naja... alles, was im Editor steht, bleibt ja weiterhin normaler Seiteninhalt, und da kann man z.B. die events überwachen.

Folgende Überwachung z.B. bewirkt, dass bei Rechtsklick auf eine Grafik im Editor-Div eine Eingabeaufforderung für den alt-Text erscheint.
Die Benutzereingabe wird dann ganz normal dem Bild zugewiesen

```
<SCRIPT FOR=divEditable EVENT=oncontextmenu LANGUAGE="JScript">
    obj=window.event.srcElement
    if(obj.tagName=='IMG')
        {
            if(uip=prompt('Alternativtext eingeben:',(obj.alt!='undefined')?obj.alt:''))
                {
                    obj.alt=uip;
                }
            window.event.returnValue=false;
        }
</SCRIPT>
```
Statt der einen kannst du da natürlich mehrere Eingabeaufforderungen hintereinander platzieren.
Auch ein selbstgebasteltes Kontextmenu wäre möglich... und natürlich schicker.


----------



## mnbvcxy (8. Juni 2005)

Jaaaaaaaaa! GEIL!
Das bringt mich schonmal einen riesen Schritt vorwärts!

Geil wäre, wenn der Benutzer praktisch keine Wahl hat das einzugeben!
Spricht sobald ein bild eingefügt wird, muss der Dialog aufgehen... mal sehen ob sowas geht!

Geht das auch für Textfluß? bzw. die dazugehörigen unsichtbaren Rahmen?


----------



## Sven Mintel (9. Juni 2005)

Das sollte alles gehen.
Zum einen musst du den *onpaste*-Event überwachen, zum anderen *ondragstart*....also Einfügen und Verschieben.

Zu den Attributenrinzipiell kannst du da alle HTML-Attribute setzen/ändern.


----------

