"BBCODES" realisieren

SebiPuck

SebiPuck

Erfahrenes Mitglied
Hallo,
gestern wollte ich in meinem Forum ein Art BBCODE - System hinzufügen :)
Das Ganze habe ich mir so vorgestellt:

HTML PART
Code: 
<div id="toolbar">
                        <table>
                            <tr>
                                <td><img class="boldTag" src="images/bold.png" alt="Fett" title="Fett" onclick="bold()"></td>
                                <td><img class="italicTag" src="images/italic.png" alt="Fett" title="Fett" onclick="italic()"></td>
                                <td><img class="imageTag" src="images/image.png" alt="Fett" title="Bild hinzufügen" onclick="image()"></td>
                            </tr>
                        </table>
                    </div>
                    <textarea name="text" placeholder="Deine Nachricht"><?php if(isset($title)) echo $text; ?></textarea>

In der Tabelle sind die einzelnen Buttons für die jeweiligen BBCODES (also Fett, Kursiv, Img usw.)

JAVASCRIPT PART
Code: 
function bold(){
                var text = "[ B]Hier fetten Text einfügen[ /B]";
                document.forms.textarea.text.value += text;
            }
            function italic(){
                var text = "[ I]Hier kursiven Text einfügen[ /I]";
                document.forms.textarea.text.value += text;
            }
            function image(){
                var text = "[ IMG]Link zum Bild hier einfügen[ /IMG]";
                document.forms.textarea.text.value += text;
            }

Hier wird dann eben ein Text automatisch zu dem bereits vorhandenen in die Textbox hinzugefügt. Das funktioniert soweit auch ohne Probleme :)

PHP PART

Hier habe ich noch nichts gemacht, da ich mir nicht sicher bin, ob ich bis zu diesem Punkt alles richtig gemacht habe :)
Auf jeden Fall würde ich hier einfach mit preg_replace drüber gehen und aus <b></b> machen.
  1. Denke ich hier richtig, oder gibts ne bessere Variante, das zu realisieren ? :)
  2. Welche Probleme / Schwachstellen hat meine Idee ??
  3. Wie realisiert man das normalerweise ? :)
Vielen Dank :)
LG



 
Zuletzt bearbeitet von einem Moderator:
Hi,

für den PHP-Part würde ich nicht mit preg_replace rumpfuschen, da dies sehr aufwendig und fehleranfällig ist. Verwende lieber bereits bestehende und getestete Komponenten anstatt das Rad neu zu erfinden:
https://github.com/jbowens/jBBCode

Wenn du eine All-In-One Lösung willst, dann kann ich dir TinyMCE empfehlen, der bringt alles mit was man normalerweise braucht und die Oberfläche kennt man von dem einen oder anderen Forum.
http://www.tinymce.com/tryit/3_x/bbcode.php

Grüße,
BK
 
Hi

falls doch lieber selbst gemacht:

Bzw. paar Funktionsvorschläge:
Bei Buttondruck und keiner vorhandenen Textmarkierung nicht nur die Tags einfügen (ohne Text
dazwischen), sondern auch den Cursor in der MItte (zwischen Anfangstag und Endtag) platzieren.
Bei markiertem Text und Buttondruck diesen Text in Tags setzen. Und in beiden Fällen, falls schon
diese Tags vorhanden sind, beiButtondruck wieder entfernen.
Ist nicht so schwer zu realisieren.

(bzw. für das Entfernen könnte man auch einschließende Tags, die nicht direkt beim
Cursor/Markierung sind, beachten, aber das wird dann umständlicher)


Zum PHP-Teil:

a) Die Ersetzung nicht gleich beim Abspeichern machen (sondern jedes Mal bei Ausgabe
Richtung Browser, und eben die DB-Daten unverändert lassen), auch wenn man zurzeit (noch) keinen
wirklichen Grund dafür hat. Sobald man evt. einem bekommt hilfts enorm.
Ist dafür codemäßig langsamer, ggf. kann man auch beide Varianten speichern (solang man die
unveränderte Version irgendwo hatText braucht ja nicht so viel...)

b) Durch was es ersetzt wird ... Wie wärs mit CSS? :)

c) Der Ersetzungsvorgang. Regexp sind für deinen Fall grad noch möglich;
falls du aber einmal mehr planst (Links, Tabellen, eine Noparsearea um auch [B] ohne
Textersetzung im Beitragstext haben zu können, oder einfach irgendwas, ), helfen Regexp prinzipiell nicht mehr
viel. Genauer gesagt immer, wenn die Behandlung der Tags von Inhalt, Attributen oderanderen Tags abhängt.

Es ist nämlich einfach nicht möglich, dafür korrekte Regexp zu schreiben, die für alle möglichen Beitragstexte
funktionieren (alles, was man machen kann, macht bei bestimmten Eingaben eben Unsinn.
Und das sind meistens nicht nur vernachlässigbare Randfälle).

Zerlegen in eine baumartige Datenstruktur, wo Tags, deren Attribute, Text, Whitespaces ...
getrennt und geschachtelt gespeichert sind hilft da weiter (bzw. zumindest die Denkweise.
Man muss nicht unbedingt zeurst eine komplette Zerlegung machen wenn man 90% davon nicht braucht)
 
Zuletzt bearbeitet:
Hey,
Danke für die Antworten :)
Ich habe mal für den Anfang JBBCodes genommen :)

sheel hat gesagt.:
Hi

falls doch lieber selbst gemacht:

Bzw. paar Funktionsvorschläge:
Bei Buttondruck und keiner vorhandenen Textmarkierung nicht nur die Tags einfügen (ohne Text
dazwischen), sondern auch den Cursor in der MItte (zwischen Anfangstag und Endtag) platzieren.
Bei markiertem Text und Buttondruck diesen Text in Tags setzen. Und in beiden Fällen, falls schon
diese Tags vorhanden sind, beiButtondruck wieder entfernen.
Ist nicht so schwer zu realisieren.

(bzw. für das Entfernen könnte man auch einschließende Tags, die nicht direkt beim
Cursor/Markierung sind, beachten, aber das wird dann umständlicher)


Zum PHP-Teil:

a) Die Ersetzung nicht gleich beim Abspeichern machen (sondern jedes Mal bei Ausgabe
Richtung Browser, und eben die DB-Daten unverändert lassen), auch wenn man zurzeit (noch) keinen
wirklichen Grund dafür hat. Sobald man evt. einem bekommt hilfts enorm.
Ist dafür codemäßig langsamer, ggf. kann man auch beide Varianten speichern (solang man die
unveränderte Version irgendwo hatText braucht ja nicht so viel...)

b) Durch was es ersetzt wird ... Wie wärs mit CSS? :)

c) Der Ersetzungsvorgang. Regexp sind für deinen Fall grad noch möglich;
falls du aber einmal mehr planst (Links, Tabellen, eine Noparsearea um auch [B] ohne
Textersetzung im Beitragstext haben zu können, oder einfach irgendwas, ), helfen Regexp prinzipiell nicht mehr
viel. Genauer gesagt immer, wenn die Behandlung der Tags von Inhalt, Attributen oderanderen Tags abhängt.

Es ist nämlich einfach nicht möglich, dafür korrekte Regexp zu schreiben, die für alle möglichen Beitragstexte
funktionieren (alles, was man machen kann, macht bei bestimmten Eingaben eben Unsinn.
Und das sind meistens nicht nur vernachlässigbare Randfälle).

Zerlegen in eine baumartige Datenstruktur, wo Tags, deren Attribute, Text, Whitespaces ...
getrennt und geschachtelt gespeichert sind hilft da weiter (bzw. zumindest die Denkweise.
Man muss nicht unbedingt zeurst eine komplette Zerlegung machen wenn man 90% davon nicht braucht)
Zum Vergrößern anklicken....

Ich habe eine kleine Frage zum JS Part :)
Wie kann ich das mit dem makiertem Text verwirklichen (bzw. wenigstens, dass der Cursor automatisch in der Mitte der Tags is)
Könntest du mir dafür nen Code geben, oder einen Link zu einem Tutorial ? :)
Das mit dem Text makieren wär nämlich schon ziemlich cool :D
 
Bratkartoffel hat gesagt.:
Hi,

für den PHP-Part würde ich nicht mit preg_replace rumpfuschen, da dies sehr aufwendig und fehleranfällig ist. Verwende lieber bereits bestehende und getestete Komponenten anstatt das Rad neu zu erfinden:
https://github.com/jbowens/jBBCode

Wenn du eine All-In-One Lösung willst, dann kann ich dir TinyMCE empfehlen, der bringt alles mit was man normalerweise braucht und die Oberfläche kennt man von dem einen oder anderen Forum.
http://www.tinymce.com/tryit/3_x/bbcode.php

Grüße,
BK
Zum Vergrößern anklicken....

Hey, ich hätte da noch eine Frage:

Ich habe das ganze jetz mit JBBCode realisiert und mir nen JS Editor gebastelt, funktioniert eigentlich super ! :)

Nun wollte ich den tag hinzufügen, leider habe ich ein Problem:
1. Anscheined gabs dafür ne Funktion vom Coder selbst:

Code: 
<?php

require_once "jBBCode" . DIRECTORY_SEPARATOR . "Parser.php";

/**
* Implements a [list] code definition that provides the following syntax:
*
* [ list]
*   [*] first item
*   [*] second item
*   [*] third item
* [ /list]
*
*/
class ListCodeDefinition extends \JBBCode\CodeDefinition
{

    public function __construct()
    {
        $this->parseContent = true;
        $this->useOption = false;
        $this->setTagName('list');
        $this->nestLimit = -1;
    }

    public function asHtml(\JBBCode\ElementNode $el)
    {
        $bodyHtml = '';
        foreach ($el->getChildren() as $child) {
            $bodyHtml .= $child->getAsHTML();
        }

        $listPieces = explode('[*]', $bodyHtml);
        unset($listPieces[0]);
        $listPieces = array_map(function($li) { return '<li>'.$li.'</li>' . "\n"; }, $listPieces);
        return '<ul>'.implode('', $listPieces).'</ul>';
    }

}

Das Problem ist nur, dass ich überhaupt keine Ahnung habe, wo man diesen Code reinpasten muss / wie ich den verwenden kann ...

2. Da ich 1. nicht geschafft habe, wollte ich einfach die tags im DefaultCode Set festlegen, also <li></li> für
  • und <ul></ul> für
    Das Problem:
    logischer Weise hat jedes list-Item eine eigene Zeile, weswegen dann zwischen den li Elementen <br> tags auftauchen (wegen der Umwandlung von Zeilenumbrüchen in <br>)
    Wie kann ich das Problem lösen ?
    Danke im Voraus,
    LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück