BBcode frage?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adresse
aufruf
auswertung
beitrag
bild
cursorposition
datei
deswegen
einleuchtend
element
fehler
fetten
formular
gecko
inhalt
insert
po
schauen
selection
uebrigens
-
Hi Leute,
fange grad erst an meine eigene homepage aus code schnipseln zu basteln die ich so in communitys im web finde, nun bräuchte ich etwas hilfe von euch.
es geht um folgendes : ich brauch eine bbcode.js mit :
b[ fetter text ]b
i[ kursiver text ]i
u[ unterstrichener text]u
img[ bild url ]img
url[ url zum link][link text ]url
und es sollte per so buttons in ne form einfügbar sein :
<head><title>Java Script / BBcode</title></head><body> <form><input name="text" type="text" style="width:150px; border:#000000 1px solid;"> <br><div id="insert" style="height:25px;"> <a href="bold"><img src="images/bold.jpg" width="25" height="25" border="0"></a> <a href="kurs"><img src="images/kursiv.jpg" width="25" height="25" border="0"></a> <a href="under"><img src="images/unterstrichen.jpg" width="25" height="25" border="0"></a> <a href="url"><img src="images/url.jpg" width="25" height="25" border="0"></a> <a href="bild"><img src="images/bild.jpg" width="25" height="25" border="0"></a></div> <textarea name="textarea" cols="" rows="" style="width:150px; height:100px; border:#000000 1px solid;"></textarea> <br><br><input name="send" style="width:150px; border:#000000 1px solid;" type="button"></form></body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
das .js steht für Javascript. Damit hat JAVA aber rein garnichts zu tun. Java und Javascript haben nur eine ähnliche Syntax gemeinsam, ansonsten kann man mit Javascript etwas völlig anderes machen.
Hier hab ich glaube ich was du suchst:
function insert(aTag, eTag) {
var input = document.forms['formular'].elements['text'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
function insertimg()
{
var addy = prompt("Gib die Adresse zum Bild ein","http://");
document.formular.text.value = document.formular.text.value + "[img]" + String(addy) + "[/img]";
}
function inserturl()
{
var addy = prompt("Bitte gib die Ziel-Adresse an","http://");
var text = prompt("Bitte gib einen Linknamen ein","");
document.formular.text.value = document.formular.text.value + "[url='" + String(addy) + "']" + String(text) + "[/url]";
}
Das ist meine .js Datei ( habe ich nicht selber gemacht ), aber wie es funktioniert ist einleuchtend.
Innerhalb des Formulares habe ich dann Links, die die entsprechenden Funktionen aus der JS-Datei aufrufen:
<a onClick="insert('', '')" class="form" href="#top"><img src="gfx/formular/bold.gif" alt="Bold" width="20" height="20" /></a>
Um ein Bild einzufügen benutze ich dann einfach:
... onclick="insertimg();" ...
Leuchtet ein oder?
EDIT: Naja jetzt hat er hier meine BBCodes ersetzt :p
Beitrag geändert: 6.6.2007 18:49:58 von ******* -
hmm kannste mir vllt ne bespiel .zip datei hochladen weil ich verstehe das nicht :
<a onClick='insert('', '')' class='form' href='#top'><img src='gfx/formular/bold.gif' alt='Bold' width='20' height='20' /></a>
oder meinst du es geht so :
<head><title>Java Script / BBcode</title><script type="text/jscript" src="bbcode.js"></script></head><body> <form><input name="text" type="text" style="width:150px; border:#000000 1px solid;"> <br><div id="insert" style="height:25px;"> <a onClick='insert('[b]', '[/b]')' class='form' href='#top'><img src="images/bold.jpg" width="25" height="25" border="0"></a> </div> <textarea name="textarea" cols="" rows="" style="width:150px; height:100px; border:#000000 1px solid;"></textarea> <br><br><input name="send" style="width:150px; border:#000000 1px solid;" type="button"></form></body> </html>
Beitrag geändert: 6.6.2007 18:54:34 von quixx -
Das liegt daran, dass Lima meine BBCodes interpretiert hat ^^.
Und Lima ersetzt auch normale ( doppelte ) Anführungszeichen und macht einfache draus.
Hier ich habs mal hochgeladen, den .js Code kannste dir einfach kopieren
Und ganz unten steht wie dann ein Link aussieht. Beachte aber, dass das Textfeld, wo die eingefügt werden sollen einen bestimmten Namen haben muss ( ich glaube "text" ).
Wenn noch Fragen sind oder noch irgendwas unklar ist dann meld dich einfach.
EDIT: Interessant bei dem was nach dem JS-Code kommt, ist eigentlich nur das was bei onclick steht, der rest ( wie class=... ) ist uninteressant, das steht nur da, weil ich es von meiner Seite kopiert hab
Hier nochmal deutlich der Link:
http://*******.lima-city.de/bbcodes.txt
Beitrag geändert: 6.6.2007 19:12:23 von ******* -
ich sehe kein link, wo hast dus hochgeladen?
-
habe es hochgeladen und versucht, es geht leider nicht :(
links :
http://quixx.lima-city.de/bbcode.php
http://quixx.lima-city.de/bbcode.js
ich sehe auch keinen erkenntlichen fehler -
Dein Formular muss den Namen "formular" haben, dann sollte es gehen.
EDIT: Wenn du andere Namen machen willst dann schau in die JS-Datei:
var input = document.forms['formular'].elements['text'];
"formular" ist der Name des Formulars und "text" der Name der Textarea, wo eingefügt wird.
EDIT2: Lima hat übrigens nicht umsonst die Editierfunktion für Beiträge. Doppelpost = böse :P
Beitrag geändert: 6.6.2007 19:22:46 von ******* -
hmmm geht net,
ich hab mal in page source [ b ] hallo [ / b ] geschrieben, siehe link,
und es wird nicht richtig angezeigt, ist das vllt falsch :
<script type="text/jscript" src="bbcode.js"></script> -
Kann sein, dass es falsch ist, schreib das hier mal ( so hab ichs bei mir ):
<script type="text/javascript" language="javascript" src="hc.js"></script>
hc.js musst du dann nur mit bbcodes.js ändern.
Aber wieso hast du eigentlich [ b ] hallo [ / b ] geschrieben in die Seite? Was soll damit denn auch passieren? o.O -
dass es dann fett angezeigt wird ...
aber es geht trozdem net hab sogar language="javascript" noch reingemacht ...
vllt deswegen
<a onClick="insert('[b]', '[/b]')" href="#top"><img src="gfx/formular/bold.gif" alt="Bold" border="0" width="25" height="25" /></a>
woher soll das script wissen, wo es eingefügt wird?
http://quixx.lima-city.de/bbcode.php
kukk dir mal bitte den quellcode an, vielleicht findest du den fehler?
Beitrag geändert: 6.6.2007 19:33:57 von quixx -
dass es dann fett angezeigt wird ...
aber es geht trozdem net hab sogar language="javascript" noch reingemacht ...
vllt deswegen
<a onClick="insert('[b]', '[/b]')" href="#top"><img src="gfx/formular/bold.gif" alt="Bold" border="0" width="25" height="25" /></a>
woher soll das script wissen, wo es eingefügt wird?
Durch die JS-Datei, da geben wir schließlich formularname und textareaname an.
Das es fett wird hat doch nichts mit Javascript zu tun, mit Javascript machst du nur, dass du die BBCodes einfügen kannst in ein Formular, das es Fett angezeigt wird machst du später mit PHP. Da wird [ b ] dann nämlich mit < b > ersetzt etc.
Schau dir das hier mal an:
http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/
Oder such bei Google nach "javascript bbcodes". Es ist vielleicht auch sinnvoll, dass du nicht nur Dinge kopierst, sondern sie verstehst. -
es geht jetzt ....
der fehler war eig einfach ich habe den ... <input type="text" ...
auch text genannt -.-
aber wie ist es mit der ausgaben, dass es auch richtig ausgegeben wird?
DANKE dir schonmal hast mir echt weitergeholfen -
es geht jetzt ....
der fehler war eig einfach ich habe den ... <input type="text" ...
auch text genannt -.-
aber wie ist es mit der ausgaben, dass es auch richtig ausgegeben wird?
DANKE dir schonmal hast mir echt weitergeholfen
Du meinst, die Umwandlung des BBCodes in HTMLCode? Das geschieht mit PHP mithilfe der Funktionen preg_replace oder auch str_replace oder eregi_replace.....
Wenn du von PHP keine Ahnung hast kann ich es dir jetzt aber auch schlecht verständlich erklären.
http://www.skoom.de/tutorials/php/bbcode-to-html.xtc
Da kannst du mal schauen, wie sowas in etwa aussieht...
Beitrag geändert: 6.6.2007 19:44:32 von ******* -
omg jetzt darf ich des noch umwandel was für .......
ich dachte des mit dem form ding hats sichs aber jetzt noch das .... darf ich wieder n halbes jahr googeln, foren durchsuchen bis ich es kann .... -
Ok weil du es bist erklär ich es dir sogar
Also erstmal solltest du noch schauen wie du die Daten des Formulars abschickst. Ich empfehle dir: per Post
<form name="formular" action=auswertung.php method=post>
Dadurch wird das Formular an "auswertung.php" geschickt mit der Methode Post.
In der Datei auswertung.php kannst du dann per PHP auf die Informationen, die per Formular übermittelt wurden, zugreifen.
Dies geschieht mit $_POST['inputname']
"inputname" ist der name des inputs bzw. des textfeldes. Wenn du in die textarea, die den namen "text" hat nun "blub" schreibst und das formular abschickst ( an auswertung.php ) dann hat $_POST['text'] den Inhalt: blub
Also $_POST['text'] enthält den text wo du die BBCodes in HTML-Code umwandeln willst. Ich erkläre es dir mit str_replace, weil es denke ich am einfachsten verständlich ist, sonst müsste ich dir noch reguläre Ausdrücke erklären.
$_POST['text'] = str_replace("[ b ]", "<b>", $_POST['text']);
Dann wird in $_POST['text'] nach [ b ] gesucht und es wird mit <b> ersetzt.
Dann schreibst du noch:
$_POST['text'] = str_replace("[ / b ]", "</b>", $_POST['text']);
Und [ / b ] wird dann mit </b> ersetzt.
Mit der echo-Funktion kannst du dann $_POST['text'] einfach ausgeben.
Hier mal ein Beispiel, wie es in deiner auswertung.php Datei aussehen kann:
<?php
$_POST['text'] = str_replace("[ b ]", "<b>", $_POST['text']);
$_POST['text'] = str_replace("[ / b ]", "</b>", $_POST['text']);
echo $_POST['text'];
?>
Dann könntest du in die textarea "text" schon den BBCode fürs Fettschreiben verwenden, weil es in auswertung ja in HTMLCode umgewandelt wird und der Inhalt des Textfeldes wird dann auch gleich ausgegeben.
Je nachdem wo du auf der Seite auswertung.php den in HTMLCode umgewandelten Text ausgeben willst schreibst du an der entsprechenden Stelle einfach <?php echo $_POST['text']; ?>
Fehler könnten nun allerdings auftreten, wenn man [ b ] schreibt aber nicht [ / b ]. Weil man dann ein <b> hat, aber kein </b>. Nunja ich wollte es dir auch nur möglichst verständlich erklären. Ich würde es auch mit preg_replace machen, aber such einfach bei Google und du findest bestimmt auch dafür Tutorials oder vorgefertigte Funktionen. -
schreiben tu ich so :
<?php include('config.php'); if(isset($_POST['write'])){ $time=time(); $eintrag= mysql_query("insert into news(time,top,text) values(\"". $time. "\",\"". $_POST['top']. "\",\"". $_POST['text']. "\")"); } echo " <form method='post' action='$_SERVER[SELF_PHP]'> <table border=0 cellspacing=0 id=content> <tr> <td id=schrift><p><input name='top' class='form_field' type='text' maxlength='50' value='$top'></p></td> </tr> <tr> <td id=text valign=top><p><textarea name='text' class='form_area' style='width:400;' ></textarea></p> <p><input type='submit' class='form_button' name='write' value='write'></p> </td> </tr> </table> </form>"; } ?>
---------------
Ausgeben würde rein theoretisch so gehen :
<?php include('config.php'); $res2= mysql_query('select * from news order by id desc'); if(mysql_numrows($res2)){ while($data = mysql_fetch_assoc($res2)){ $data['text'] = str_replace('[ b ]', '<b>', $data['text']); $data['text'] = str_replace('[ / b ]', '</b>', $data['text']); echo "".$data[top]."<br>".$data[text].""; } } ?>
-----------
kannst du mir noch einmal pls alle bbcodes die du hast posten und zwar wenns geht so:
[ b ] [ / b ]
also mit leerzeichen wenn du das noch machen könntest, und wenn es nacher eght dann bin ich schon fast fertig ...
Beitrag geändert: 6.6.2007 21:58:39 von quixx -
Moin,
Habe das Ganze mal verschoben, da es nichts mit Java zu tun hat.
Gruß,
Puni
Beitrag geändert: 7.6.2007 15:08:30 von puni -
koay jetzt wäre nur noch die letzte antwort ob das so richtig ist nett ^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage