Tipp für Olaf Schneider und Orestes; designMode=On
Thomas Schmieder
- dhtml
Hallo Olaf,
seit Tagen geht mir der Thread von Orestes nicht mehr aus dem Kopf, einen eigenen kleinen Rich-Text-Editor in HTML/JavaScript zu schreiben. Für unser Projekt könnten wir sowas nämlich gerade gut gebrauchen. Es wied dort eine "WYSIWYG"-Schnittstelle für ein CMS aufgebaut, das später auch von HTML-Laien bedient werden soll.
Ich habe dazu folgendes gefunden:
<!-- nur in Kurzform ---------------------------------- -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>iFrame als Editbox</title>
<script type="text/javascript" >
//... geschnippelt
</script>
</head>
<body>
<iframe name="mytext" witdth="80%" ID="mytext" height="200"></iframe>
<script>
mytext.document.designMode="On";
// wieso heißt das hier nicht document.mytext.designMode ...?
</script>
</body>
</html>
<!-- End of Schnipp-Schnapp ------------------------------- -->
meine Frage an Euch:
In welchen Browsern funktioniert das?
Könntet Ihr das bitte mal durchchecken?
Ist das jetzt Standard oder ist es proprietär?
Die Quelle dafür: http://www.codeproject.com/jscript/w3richtechedit.asp
Habs runtergeladen. Sind nur ca. 10k aber dafür ne Menge Stoff zum Verstehen *puh*
Liebe Grüße aus http://www.braunschweig.de
Tom
Hi Tom
meine Frage an Euch:
In welchen Browsern funktioniert das?
MS IE.
Könntet Ihr das bitte mal durchchecken?
Ja.
Ist das jetzt Standard oder ist es proprietär?
Was denkst _du_? ;-)
Nu hör aber mal auf: Das ist ein ASP-Script und du fragst, ob das proprietär wäre... >;)
Fabian
hallo Fabian,
meine Frage an Euch: In welchen Browsern funktioniert das?
MS IE.
Das ist zwar (wahrscheinlich) korrekt, aber wenn du es begründen solltest, würdest du wohl aus allen Wolken fallen
Könntet Ihr das bitte mal durchchecken?
Ja.
Ich bezweifle, daß du es "gechecked" hast
http://www.codeproject.com/jscript/w3richtechedit.asp
Nu hör aber mal auf: Das ist ein ASP-Script
Nun hör aber DU mal auf !!!!!
<!-- ausnahmsweise mehrere Ausrufezeichen -->
lediglich die download-Seite funktioniert über ASP, wenn man das ZIP-Archiv erhalten hat und sich dessen Inhalt anschaut, ist es überhaupt kein ASP mehr. Allerdings ist es wohl auch kein "richtiges" Javascript, sondern JScript, also die microsoft-spezifische Variante. Und _das_ dürfte das Problem sein.
Verdächtig ist sowas:
1. - in der "main.htm" steht
<SCRIPT>
<!--
...
// -->
</script>
2. - in der "compose.js" steht unter vielem anderem:
event.cancelBubble=true;
und es werden ohne Alternativen solche Variablen gesetzt:
curr=document.body.all[i];
Ich habe mehrere solche kleinen "CMS-Verschnitte" bereits kennengelernt, die alle mit dem IE ganz gut zurechtkamen, aber in jedem anderen Browser versagen mußten, weil sie genau das tun, was diese Konstruktion ebenfalls zu tun scheint: sie haben auf JScript gesetzt statt auf Javascript. Und da gibts eben ein paar Schreibfunktionen, die Javascript per definitionem nicht haben _darf_
Fazit: wenn es Christian gelingt, die JScript-Anweisungen in Javascript und "document.all" in "document.getElementByID" zu verwandeln hätte er wahrscheinlich das, was er haben möchte. Ich sehe da leider schwarz, weil ich das auch schon mehrfach versucht habe und keine "browserkonforme" Lösung hinzubekommen war.
Ein zusätzliches Hemmnis entsteht dadurch, daß die "Schreibfläche" ein iFrame ist.
Lösungsvorschlag für Christian: Das Konzept dieses Scripts durchdenken und in PHP nachbauen. Dann ist das Ganze hinzubekommen
Grüße aus Berlin
Christoph S.
Hi,
die andere Variante, die wir angedacht haben, ist die:
<!-- ----------------------------------------------------- -->
<html><head><title>Test</title>
<script type="text/javascript">
<!--
ausgabestr="Druecken Sie irgendwelche Tasten!";
cursorpos=0;
function get_cursor_str()
{
cursorStr = "<span style='background-color:cyan;'>" +
ausgabestr.substr(cursorpos,1) + "</span>";
return cursorStr;
}
function ausgabe()
{
// alert("Sie haben die Taste mit dem Wert " + window.event.keyCode + " gedrueckt");
cursorstr=get_cursor_str();
document.getElementById("textfeld").innerHTML =
ausgabestr.substr(0,cursorpos) +
cursorstr +
ausgabestr.substr(cursorpos+1,65335);
}
//window.captureEvents(Event.KEYDOWN); // für Netscape. Geht aber nicht
//window.onkeypress = cap;
//function cap(ereignis)
//{
// alert(ereignis.which);
//}
function move_cursor()
{
var taste=window.event.keyCode;
switch(taste)
{
case 37:
cursorpos--;
if (ausgabestr.substr(cursorpos,1)==">")
{
do
{
cursorpos--;
}
while (ausgabestr.substr(cursorpos,1)!="<");
cursorpos--;
}
break;
case 39:
cursorpos++;
if (ausgabestr.substr(cursorpos,1)=="<")
{
do
{
cursorpos++;
}
while (ausgabestr.substr(cursorpos,1)!=">");
cursorpos++;
}
break;
}
ausgabe();
}
function tastendruck()
{
ausgabestr=ausgabestr.substr(0,cursorpos)
+String.fromCharCode(window.event.keyCode)
+ausgabestr.substr(cursorpos,65535);
cursorpos++;
ausgabe();
}
function init1()
{
ausgabe();
}
//-->
</script>
</head>
<!--
<body onKeyDown="ausgabe();">
-->
<body onkeyDown="move_cursor();" onKeyPress="tastendruck();" onLoad="init1();">
<div ID="textfeld"></div>
</body></html>
<!-- ----------------------------------------------------- -->
Das ist nur ein Funktionsmodell und müsste auch in Netscape und Mozilla zum Laufen zu bringen sein. Nur mit der capture.Events-Methode tu ich mich noch so schwer. Muss ich in Netscape dafür nun onKeyDown und onKeyPress rauslassen?
Wie kann ich die beiden Handler unter Netscape anmelden?
Und unter Opera kann man auf diese Weise nicht in das DIV hineinschreiben. Was müsste ich da anders machen?
Oh Orestes, da hast Du was angerichtet *ggg*
Liebe Grüße aus http://www.braunschweig.de
Tom
hallo Christian,
die andere Variante, die wir angedacht haben
[...]
ups, willst mich jetzt auf den Abend noch zu Denksport verleiten ;-)
Das ist nur ein Funktionsmodell und müsste auch in Netscape und Mozilla zum Laufen zu bringen sein
auf den ersten Blick ja. Und einen zweiten Blick riskiere ich heute abend nicht mehr, pöh ...
Nur mit der capture.Events-Methode tu ich mich noch so schwer. Muss ich in Netscape dafür nun onKeyDown und onKeyPress rauslassen?
Gelegentlich hilft ja ein Blick in ein gewisses Geheimdokument unter http://selfhtml.teamone.de/javascript/objekte/window.htm#capture_events
Und unter Opera kann man auf diese Weise nicht in das DIV hineinschreiben. Was müsste ich da anders machen?
dochdoch, man kann. Das Teil muß nur eine (eventuell über CSS formatierte) Größe haben.
Oh Orestes, da hast Du was angerichtet *ggg*
Orest war schon in der Antike nicht ganz umsonst der schwiergiste Sohn Agamemnons ...
Also, ich fasse mal zusammen: du willst, daß Hausaufgaben gemacht werden? Gut, machen wir, aber in gleitender Arbeitszeit ...
Grüße aus Berlin
Christoph S.
gruss Thomas, hallo Christoph,
Also, ich fasse mal zusammen: du willst, daß Hausaufgaben gemacht werden? Gut, machen wir, aber in gleitender Arbeitszeit ...
ich hab' vor lange zeit schon mal gestrebt und stelle meine
denkansaetze hiermit zur verfuegung (wobei ich Euch zeit,
geduld, guten willen und mehrere erleuchtungen wuensche);
kritik fuer meinen code nehme ich nicht an, denn die beispiele
wurden noch zu zeiten gezeugt, als dhtml schlicht _LAYER_ALL_
bedeutete - hier also eine schnelle zusammenfassung zu den
gleich folgenden verlinkten code-fetzen:
* vorbereitung - wie komme ich an die keycodes?
- entwickelt fuer netscape 4 und msie 4.x++
# http://www.pseliger.de/xBrowserKeyEventLogger/cacheKeyEvents_v09b.html
* erster schritt - wie koennte man anfangen zu schreiben ?
- anpassung des keyCode-log-scripts zuerstmal nur fuer den msie
- zwei versionen, die sich mit einer vernuenftigen loesung des
zeilenumbruchs rumschlagen, denn man kann hier tatsaechlich
schon seine eingaben mit der [|<--] backspace-taste loeschen;
- ausserdem ist das problem der gross-kleinschreibungs-erkennung bei
verschiedenen win-betriebssystemen geloest (hier fuer win98/winNT,
etwas anderes hatte ich nicht zum testen zur verfuegung);
# http://www.pseliger.de/xBrowserKeyEventLogger/cacheKeyEvents_v10b01.html
# http://www.pseliger.de/xBrowserKeyEventLogger/cacheKeyEvents_v10b02.html
* steckengeblieben - gescheitert - unvollendet - nur msie implementiert:
- die materie wird komplexer -
- denn wie programmiert man einen blinkenden cursor, der sich variablen
schriftgroessen und hintergrundfarben anpasst? - problem wurde geloest !!
- die hoffnung einen anspruchsvollen editor "layer"-und-"all"-konform
zu bauen schwindet, da ja noch ein flexibles farbwaehltool hermuss,
ganz zu schweigen von maussensitivitaet sowie copy und paste an
mausmarkierten textpassagen;
- diese gedanken erst mal zur seite schiebend, wird eine weitere variante
aufgelegt, die ein dropdownmenu zum wechseln von styles bietet - so kann
man uebriegens sehen, welche css-eigenschaften vom msie unterstuetzt werden;
- es laeuft alles unter dem msie, jetzt hat sich aber ein fehler bei den zeilen-
umbruechen eingeschlichen, und zwar immer dann, wenn zwei zeilenumbrueche
hintereinander (ohne ein weiters zeichen) eingegeben werden;
# http://www.pseliger.de/xBrowserKeyEventLogger/cacheKeyEvents_v10b.html
* das farbwaehltool ist also die neue herausvorderung, denn ein komfortabler
_LAYER_ALL_editor_ waere mit vertretbarem aufwand nicht zu programmieren -
ausserdem reizt die auseinandersetzung mit den grundlagen der farbenlehre;
- ok: ein schneller hack fuer den msie steht (im juni/juli 2001 gab's noch
keinen vernuenftigen mozilla - und: solange die dynamik nicht zu komplex
wird, bedient die testversion auch den netscape 4);
# http://www.pseliger.de/colorPicker/testColorPickerXbrowser.html
# http://www.pseliger.de/colorPicker/testColorPickerMSIE.html
(die aufloesung der farbtabelle erhoeht man in dieser testversion, indem
die linke maustaste solange geklickt wird, bis diese dem nutzer hoch
genug oder dem rechner zu hoch ist - der geht dann in die knie - die
umsetzung dieser aufloesungsauswahl ueber den horizontalen slider war
nicht mehr reizvoll, da ja alle probleme, die das farbwaehltool
aufgeworfen hatte schon geloest waren)
+ die maximale farb-aufloesung betraegt uebrigens:
(119 zeilen * 119 spalten * 359 farben) + 117 graustufen + schwarz + weiss
macht: 5.083.918 unterschiedliche farbnuancen, die durch dieses werkzeug
abgebildet werden koennen;
schliessen moechte ich mit einem archiv-link auf einen beitrag, dessen
texte noch einiges zum hintergrund des farbwaehlers ergaenzen:
http://forum.de.selfhtml.org/archiv/2002/2/4949/#m27832
gutes gelingen - by(t)e by(t)e - peterS. - pseliger@gmx.net
Und unter Opera kann man auf diese Weise nicht in das DIV hineinschreiben. Was müsste ich da anders machen?
dochdoch, man kann. Das Teil muß nur eine (eventuell über CSS formatierte) Größe haben.
Das stimmt soweit ich weiss nicht. Opera (zumindet bis 6) kann keine DIV-Inhalte verändern.
Struppi.