Zeilenumbruch statt Absatz

**fck_lunae** · 11.05.2009, 13:55

Hallo!

Ich bin neu hier und hoffe, dass ich hier endlich eine Antwort finde oder besser gesagt, dass ich hier zumindest die Hilfe finde, die ich brauche.

Ich bastel momentan an einem WYSIWYG-Editor mit einem iFrame.
Das Problem ist, dass er anstatt eines normalen Zeilenumbruchs beim Enter einen neuen Absatz einfügt (zumindest im IE).

Habe nun mehrfach im Internet gelesen, dass dies wohl Standard ist und dass man sowas durch Überwachen und Verändern der Enter-Aktion beeinflussen kann.

Meine Frage: Wie genau mach ich das in JavaScript?

Wär echt lieb, wenn mir da jemand helfen könnte! Danke im Voraus!

**Guin** · 11.05.2009, 15:24

Moin,
ich denke mal, du benutzt einen fertigen Editor, oder? TinyMCE?

Dann kann man mit "Shitf+Return" einen Zeilenumbruch hervorrufen.

**fck_lunae** · 11.05.2009, 15:35

Hallo!

Nein, ich schreibe einen eigenen Editor.

Und das ist mir auch klar, das geht auch mit meinem Editor.

Es soll trotzdem ein normaler Zeilenumbruch eingefügt werden, wenn man Enter drückt, und kein Absatz.

**Guin** · 11.05.2009, 15:38

Na wenn du einen eigenen schreibst, hast du doch die JS-Aktion geschrieben, die den Absatz einfuegt.
Denn normalerweise verhaelt sich ein Textfeld so nicht (siehst du ja hier bei Beitraege schreiben).

Wenn es nichts eigenes ist, musst du uns schon sagen, was du benutzt.

**fck_lunae** · 11.05.2009, 15:44

Nochmal: Ich benutze etwas eigenes.
Jedoch musste ich nirgends die Aktion festlegen, die den Absatz einfügt.

Hier mal der Code:

HTML-Code:

<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<html>
<head>
<title>WYSIWYG-Editor</title>
<script language="JavaScript">

function Init()
{
iView.document.designMode = 'On';
}
				
function boldIt()
{
iView.document.execCommand('bold', false, null);
iView.focus();
}
				
function copyIt()
{
iView.document.execCommand('copy', false, null);
iView.focus();
}
				
function cutIt()
{
iView.document.execCommand('cut', false, null);
iView.focus();
}
				
function pasteIt()
{
iView.document.execCommand('paste', false, null);
iView.focus();
}
				
function doImage()
{
var imgSrc = prompt('Bitte geben Sie den Dateipfad ein!', '')
if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
iView.focus();
} 
				
function doLink()
{
						iView.document.execCommand('createLink');
iView.focus();
}
				
function doBulList()
{
						iView.document.execCommand('insertunorderedlist', false, null);
iView.focus();
} 
				
function doLeft()
{
iView.document.execCommand('JustifyLeft', false, null);
iView.focus();
}
				
function doFull()
{
						iView.document.execCommand('JustifyFull', false, null);
iView.focus();
}

function getText()
{
						document.getElementById('Text').value=document.getElementById('iView').contentWindow.document.getElementsByTagName('html')[0].innerHTML
}
</script>

<body onLoad="Init()">
<input type="image" onClick="boldIt()" src="file:///H|/Eigene Dateien/Editor/bold.gif">
<input type="image" onClick="doLeft()" src="file:///H|Eigene Dateien/Editor/left.gif">
<input type="image" onClick="doFull()" src="file:///H|/Eigene Dateien/Editor/full.gif">
<input type="image" onClick="doBulList()" src="file:///H|/Eigene Dateien/Editor/bullet.gif">
<input type="image" onClick="copyIt()" src="file:///H|/Eigene Dateien/Editor/copy.GIF">
<input type="image" onClick="cutIt()" src="file:///H|/Eigene Dateien/Editor/cut.GIF">
<input type="image" onClick="pasteIt()" src="file:///H|/Eigene Dateien/Editor/paste.GIF">
<input type="image" onClick="doImage()" src="file:///H|/Eigene Dateien/Editor/image.gif">
<input type="image" onClick="doLink()" src="file:///H|/Eigene Dateien/Editor/link.gif">
<form method="GET" action="<%= basePath %>jsp/test/save.jsp">
<input type="image" onClick="getText()" src="file:///H|/Eigene Dateien/Editor/save.GIF">
<input type="image" onClick="getText()" src="file:///H|/Eigene Dateien/Editor/save.GIF">
<input type="hidden" name="Text" value="">
</form>
<br>
<iframe id="iView" style="width: 668px; height:200px"></iframe>
</body>
</html>

**Guin** · 11.05.2009, 16:03

document.designMode = 'On';

Naja, das ist nun aber kein wirklich eigener Editor; das ist vom Browser implementiert.

Mir wuerde hier nun nur einfallen, dass man den Paragraphen p so stylet, dass der aussieht wie ein normaler Zeilenumbruch.
Beim Weiterverarbeiten muss man durch \n oder ersetzen und dann und (anfang, ende)entfernen.

**fck_lunae** · 12.05.2009, 07:25

Danke erstmal!

Ja, das wäre durchaus eine Möglichkeit. Ich weiß nur leider nicht genau, wie ich sie umsetzen kann.

Haste da vielleicht ein Beispiel für mich? Nur, wenns nicht zu viel Code ist natürlich!

**Guin** · 12.05.2009, 07:31

p{margin:0; padding:0}
und
z.B. preg_replace

**fck_lunae** · 12.05.2009, 08:46

Hmmmm, hilft mir jetzt in Javascript nicht so wirklich weiter... (Hab keine css-Datei dafür angelegt.

)

**Guin** · 12.05.2009, 08:52

Hmmmm, hilft mir jetzt in Javascript nicht so wirklich weiter

Nicht in JS.

CSS:
#iView p{margin:0; padding:0}

in PHP:
preg_replace(...) oder str_replace

Die Javaentsprechung musst du selber finden, sollte aber sehr aehnlich sein.

**fck_lunae** · 12.05.2009, 09:05

Jepp, nach der werde ich wohl suchen müssen.

Vielen Dank!

zur Startseite vom TP

Thema: Zeilenumbruch statt Absatz

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Zeilenumbruch statt Absatz

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Absatz formatieren?

Statt "Klicken" drück' ich Enter: Statt OnClick verwende ich?

Frontpage Absatz

Absatz bleibt nicht Absatz

Schrift Absatz

Aktive Benutzer

Aktive Benutzer

Berechtigungen