Re: Anpassungen + Bedienung

• egal •

Geschrieben von ForenTester am 01. Mai 2004 15:12:53:

Als Antwort auf: Re: zweite Ausbaustufe... geschrieben von TeeTrinker am 26. April 2004 16:37:35:

Heute mal einiges zum Umgang mit dem Schreibformular und dessen Anpassungsmöglichkeiten ;-)
In allen neueren Teilen schreibe ich in einige Teile ein Class-Attribut, um dieses Element
per CSS entsprechend gestalten zu können. Das Schreibformular hat für zwei Tabellenzellen
ein Class-Attribut, die 'linke Tabellenzelle' für ZusatzInfos kann mit 'keyinfo' und die 'rechte
Tabellenzelle' (neben Name, Email, BeitragsTitel) für eigene Entwicklungen kann mit 'formedit'
gestylt werden. Ebenfalls haben die Editier-Scripte für einige Elemente den ClassNamen 'formedit'
sowie die Buttons des hier eingebauten Editors den ClassNamen 'button' und können so anders
wie die Absende-Buttons gestylt werden.
Zusätzlich schreibt der URL-Button ein class="extern" in den Link, um diesen Links im Beitrag
mit einem Design hervorzuheben. Wem dies stört, kann in 'tagsedit.js' dieses class="extern" löschen.
Der erste Editor in Beitrag 35 enthält den ClassNamen 'MiniEdit' für die TabellenElemente.

Wie bringe ich Styles in das Schreibformular?

Das einfachste ist natürlich, wenn man bereits mit einer externen CSS-Datei arbeitet, dann
sind die ClassNamen einfach in diese eine Datei zu schreiben und dann erneut hochzuladen.
Wenn auf die EinDatei-Variante umgestellt werden möchte, lege zuerst eine Datei z.B. 'mein.css' an,
hole Deine bisherigen Stylesheets aus der 'index.htm' und den 'anderen Seiten' am besten aus der
Forenverwaltung "Seiten-Header (Meta-Tags, CSS) / Headers", füge diese in 'mein.css' ein
(alles was zwischen <style type="text/css"> und </style> steht) sowie zusätzlich
die neuen ClassNamen wie in der Vorlage in der Tabelle unten. In der Forenverwaltung ersetze
alles ab <style type="text/css"> bis </style> durch den Link zur CSS-Datei:
<link rel="stylesheet" href="/LagerOrt/mein.css" type="text/css">
Falls jetzt nicht alle Seiten auf eine externe Datei umgestellt werden sollen, sondern nur das Schreibformular,
dann schmuggel die StyleAngaben in den Kopfbereich des Formulars und der Vorschau in der Forenverwaltung
unter "Seitenköpfe und -füsse / Head and foot of pages" in die Textfelder 'Editier-Kopf / Start of the edit-pages'
und 'Vorschau-Kopf / Start of the preview-page' mit: <style type="text/css">
... hier Styleangaben ...
</style>

Muster für neue Stylesheets

form{display:inline;}
a.extern:link{background:white;color:darkblue;text-decoration:overline;}
a.extern:visited{background:#ffffbb;color:darkblue;text-decoration:none;}
a.extern:active{background:#ffffbb;color:darkblue;text-decoration:none;}
a.extern:hover{background:moccasin;color:black;text-decoration:overline;}
table.formedit{width:1%;border-width:0px;}
td.formedit{width:1%;border-width:0px;}
select.formedit{font-weight:bolder;}
option.formedit{font-weight:bolder;}
td.keyinfo{width:1%;border-width:0px;}
input.button{border-color:whitesmoke #c0c0c0 #c0c0c0 whitesmoke;border-style:solid;border-width:1px;-moz-border-radius:15px;}
textarea{font-family:Verdana,Arial,Helvetica;font-size:10pt;}

HTML-Editor Bedienung
Um den HTML-Editor überhaupt zu Gesicht zu bekommen, muss im Browser des Schreibers Javascript
aktiviert sein, dann wird die Tabelle mit den Buttons über das Textfeld (oder 'rechte Tabellenzelle')
geschrieben.
Je nach Browser (und Version) wird durch Klick der Anfangs-HTML-TAG geschrieben und bei zweitem
Klick der End-HTML-TAG, bei 'SchriftStyle' werden Anfang- und End-TAG gleichzeitig geschrieben,
alles entweder am Ende des Textfeldes oder an die Stelle der Cursorposition. Die Buttons sind auch
per Tastaturkey ansprechbar, wie auf dem FAQ-Button aufgelistet. Ab Internet Explorer 5 kann
auch bereits geschriebener Text markiert werden und per Buttonklick (SchriftStyle) um den markierten
Text die TAG's geschrieben werden, in diesem Fall genügt ein Klick. Ein Fehlklick kann hierbei auch
mit [Strg+z] wieder rückgängig gemacht werden, leider klappt das nicht immer •insbesondere bei Einzel-Tag-Schreibung•.

Text sollte immer mit einem begonnenen TAG auch wieder geschlossen werden, wer sich
nicht sicher ist, ob was vergessen wurde, nimmt den Button /TAG (Alt+t).
Eine weitere Besonderheit ist in der Reihenfolge der Listen-Buttons zu beachten:

zuerst ist auszuwählen, ob eine einfache Auflistung oder nummerische Aufzählung dargestellt werden soll,
dann ist ein Listenpunkt zu setzen (Alt+p), welcher nach dieser Textzeile wieder geschlossen wird (Alt+p);
jeder weitere Listenpunkt kann nun nur mit diesem Button zur Aufzählung hinzugefügt werden;
nach dem letzten Listenpunkt kann der Rest mit /TAG (Alt+t) beendet werden
hierbei wird auch der ListenTyp wieder geschlossen.
Während des Schreibens eingefügte Zeilenumbrüche sollten in den Listen entfernt werden,
sieht sonst manchmal sehr auseinandergezogen aus, dafür gibt es die (Offline-)Vorschau ;-)

Änderungen am HTML-Editor-Script
Dies empfehle ich nur Forenmastern, welche wissen, was sie tun ;-) möglich ist aber einiges.
Oben wurde bereits vom Löschen des Class-Attribut geschrieben, dies ist in der Zeile
htmltags = new Array leicht zu finden und die leichteste Übung.
In der Zeile var altkeys = kann Text hinzugefügt werden, welcher in allen Browsern auf den
FAQ-Button gelegt wird, in den folgenden Zeilen wird zwischen Internet Explorer und anderen
Browsern unterschiedlicher Hilftext bereitgestellt.
Beim Schreiben auf den JavaScript-Syntax achten, welcher bei Fehlern den Script untauglich macht:

es muss alles in einer Zeile geschrieben werden, Zeilenumbrüche werden mit \n erzeugt
\t sind Tabulatoren im Hilfsfenster
Sollen einige spezielle Zeichen dargestellt werden, wie "Anführungsstriche" sind diese zu maskieren \"

Die SchriftFarben und SchriftGrößen sollten mit etwas Kenntnis leicht in den options-TAGs
gefunden und selbstanpassbar sein. Wichtig: KEIN Zeilenumbruch erzeugen.
Schwieriger wird das Hinzufügen von Buttons zum HTML-Editor, trotzdem ein Beispiel:
Ein Button (inkl. Tabellenzelle) sollte unbedingt vor den SchriftStyle-Feldern eingefügt werden,
anderenfalls werden Tastaturkeys für diesen Button nicht mehr funktionstüchtig (warum auch immer).
<td class="formedit"><input type="button" class="button" accesskey="x" title="y" name="addhtmlcodeZ" value="X" style="width:30px" onClick="htmlstyle(z)"></td>
Anzupassen ist bei diesem Button alles farblich hervorgehobene:
- x X freier Tastaturkey / Buttonbeschriftung
- y InfoText
- z Z Nummer des Anfang-TAG in der Zeile htmltags = new Array
Diese Nummer ist wichtig, wenn ein Button hinzugefügt wird, hier ist die letzte Nummer die 18,
beim Hinzufügen wäre dann die 20 zu vergeben!
Die 20 hat bereits die SchriftFarbe, also ist die 20 im Select-TAG auf die 22 zu erhöhen.
Die 22 hat bereits die SchriftGröße, also ist die 22 im Select-TAG auf die 24 zu erhöhen. Alles klar?

Antworten:

Re: ScriptFunktionen einbauen RumSchrauber 05.05.2004 13:42 (0)