Html Tags in textarea

nofear87 · 01.11.2008, 18:54

Hallo,
oft sieht man bei online Editoren, das sie um einen Text, den man in einem Textfeld (textarea) markiert hat, per Buttonklick (javascript) Html Tags hinzufügen. Könnt ihr mir erklaren wie dies geht, bzw. wo ich Tutorials, beispiele hierzu finde? LG Robert

nikosch · 01.11.2008, 19:50

Schau mal hier: javascript: Formulare: Text an Cursorposition einfügen oder im Wiki unter Autoren > Bausteine die Bookmarklets.

nofear87 · 01.11.2008, 20:06

Dank dir nikosch! Sehr schönes Beispiel!
Eh ich noch einen neuen post aufmachen, könntest du dir vorstellen, wie es möglich ist eine textarea zwischen visueller und HTML Ansicht umzuschalten. Sprich das man einmal den Quelltext sieht, also die Tags und einmal ihre Auswirkungen. Bei Wordpress wird das Bsp.-weise so gemacht.
LG

nikosch · 01.11.2008, 20:12

Das ist dann keine textarea sondern mit Javascript ins Dokument bzw. ein iframe geschrieben. FCK macht das m.E. so. Das ist aber ungleich komplizierter. Ich glaube Manko10 hatte hier irgendwo mal was gepostet, wie man direkt ins HTML Dokument schreibt.

Manko10 · 01.11.2008, 21:35

Naja, das lässt sich mit allen Elementen und somit auch mit einer Textarea machen. Ich finde, das ist die beste Variante, da die Semantik der Elemente erhalten bleibt. Einen Iframe finde ich unschön.
Das ganze läuft auf Richtextbasis und wird vom Browser selbst bereitgestellt.
Um den Designmode für ein bestimmtes Element anzuschalten, muss man Folgendes schreiben:

Code:

document.getElementById('mytextarea').contentEditable = true;
document.getElementById('mytextarea').designMode = 'on';

Ist der Designmode einmal angeschaltet, steht hierfür auch erweitertes JavaScript zur Verfügung (z.B. Rückgängig/Wiederholen, fetter Text, kursiver Text usw. usf.).
Weitere Infos gibt es hier: Converting an app using document.designMode from IE to Mozilla.
Und ein ausführliches Beispiel dort: Mozilla Rich Text Editing Demo

nofear87 · 01.11.2008, 22:59

werde es morgen mal asuprobieren! und dann mein ergebnis vorstellen! vielen dank euch beiden.

nofear87 · 02.11.2008, 00:21

Code:

<script>
function viewsource(source)
{
  if (source) {
    document.getElementById('edit').contentEditable = true;
    document.getElementById('edit').designMode = 'on';
  } else {
      document.getElementById('edit').contentEditable = false;
    document.getElementById('edit').designMode = 'off';
  }
}


</script>
<textarea id="edit"></textarea>
<input type="checkbox" onclick="viewsource(this.checked)">
View HTML Source</input>

ich bekomms einfach nicht hin, hoffe ihr könnt mir tipps geben!
Liebe Grüße

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
HTML Tags auf dem Bildschirm ausgeben.	Schmuse	PHP Tipps 2008	8	13.10.2008 15:05
[Erledigt] RegEx: beliebige HTML Tags in String ersetzen	Der Blaue Gott Balmung	PHP Tipps 2008	8	13.09.2008 18:01
mehrere html tags in sql abfrage	THP	Datenbanken	11	19.07.2008 12:48
Bestimme HTML Tags mittels RegEx rausfiltern	Mano	PHP Tipps 2008	6	27.09.2007 14:22
richtiger code in textarea, als html gehts nicht	notyyy	HTML, Usability und Barrierefreiheit	2	09.12.2006 13:21
nur erlaubte html tags umwandeln		PHP Tipps 2006	2	30.10.2006 13:53
[Erledigt] Validation Problem - HTML Tags in Javascript		HTML, Usability und Barrierefreiheit	7	06.03.2006 23:38
HTML Tags als Text ausgeben?	cebe	PHP Tipps 2006	1	03.03.2006 15:50
Erkennung von HTML Tags	McLain	PHP-Fortgeschrittene	4	26.04.2005 10:03
Benutzeingaben in HTML Tags konvertieren		PHP Tipps 2005	2	12.03.2005 22:30
Filtern von HTML Tags aus String		PHP Tipps 2005	2	18.02.2005 08:44
html tags anzeigen	me	HTML, Usability und Barrierefreiheit	7	20.01.2005 22:22
[Erledigt] Frage: Text abschneiden aber auf html tags achten		PHP-Fortgeschrittene	1	19.01.2005 20:46
[Erledigt] imap_qprint ohne (HTML Tags)		PHP-Fortgeschrittene	0	29.09.2004 14:09
[Erledigt] Probleme mit html tags!		PHP Tipps 2004	5	28.07.2004 23:37

01.11.2008, 18:54
nofear87 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 192	Html Tags in textarea Hallo, oft sieht man bei online Editoren, das sie um einen Text, den man in einem Textfeld (textarea) markiert hat, per Buttonklick (javascript) Html Tags hinzufügen. Könnt ihr mir erklaren wie dies geht, bzw. wo ich Tutorials, beispiele hierzu finde? LG Robert


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.11.2008, 19:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Schau mal hier: javascript: Formulare: Text an Cursorposition einfügen oder im Wiki unter Autoren > Bausteine die Bookmarklets. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 20:06
nofear87 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 192	Dank dir nikosch! Sehr schönes Beispiel! Eh ich noch einen neuen post aufmachen, könntest du dir vorstellen, wie es möglich ist eine textarea zwischen visueller und HTML Ansicht umzuschalten. Sprich das man einmal den Quelltext sieht, also die Tags und einmal ihre Auswirkungen. Bei Wordpress wird das Bsp.-weise so gemacht. LG

01.11.2008, 20:12
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das ist dann keine textarea sondern mit Javascript ins Dokument bzw. ein iframe geschrieben. FCK macht das m.E. so. Das ist aber ungleich komplizierter. Ich glaube Manko10 hatte hier irgendwo mal was gepostet, wie man direkt ins HTML Dokument schreibt. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 21:35
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Naja, das lässt sich mit allen Elementen und somit auch mit einer Textarea machen. Ich finde, das ist die beste Variante, da die Semantik der Elemente erhalten bleibt. Einen Iframe finde ich unschön. Das ganze läuft auf Richtextbasis und wird vom Browser selbst bereitgestellt. Um den Designmode für ein bestimmtes Element anzuschalten, muss man Folgendes schreiben: Code: document.getElementById('mytextarea').contentEditable = true; document.getElementById('mytextarea').designMode = 'on'; Ist der Designmode einmal angeschaltet, steht hierfür auch erweitertes JavaScript zur Verfügung (z.B. Rückgängig/Wiederholen, fetter Text, kursiver Text usw. usf.). Weitere Infos gibt es hier: Converting an app using document.designMode from IE to Mozilla. Und ein ausführliches Beispiel dort: Mozilla Rich Text Editing Demo __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

01.11.2008, 22:59
nofear87 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 192	werde es morgen mal asuprobieren! und dann mein ergebnis vorstellen! vielen dank euch beiden.