Stylemotion.de Forum » apexx » Konzepte & Codeschnipsel
WYSIWYG BBCODE Editor integrieren
Seiten (1): 1  
Autor Beitrag
 
pjfry
Kunde (Support beendet)
WYSIWYG BBCODE Editor integrieren
Hallo zusammen,

ich bzw. meine Community hat sich shcon öfters einen WYSIWYG Editor für Blogs, Forum, etc gewünscht. Vielleicht hat ja auch der eine oder andere hier mein Wunsch dazu in Forum gesehen.

Nun habe ich mich selber ans Werk gemacht und nach einem WYSIWG BBCODE Editor gesucht. Ich habe einen gefunden und versucht einzubinden.

Ich habe es zwar bisher nur als Editor für Blogs verwendet, aber ich denke im Forum müsste sich das so auch integrieren lassen. Daher dachte ich schreibe hier mal eine kleine Anleitung dazu.

1) Editor downloaden

Zuerst müsst Ihr Euch den Editor unter http://blog.jitbit.com/2009/08/wysiwyg-bbcode-editor.html herunterladen. Entpackt ihn einfach in ein Verzeichnis auf Euren Rechner.

2) Editor auf Euren Server laden

Da ich ein (zumindest im Internet) ordentlicher Mensch bin habe ich ein Extra Verzeichnis für meine zusätzlichen Scripte auf meinen Server angelegt. Also habe die Dateien
  • editor.css
  • editor.js
  • das Verzeichnis images


auf meinen Server in das Verzeichnis /design/scripte/bbedit/ geladen.

3) Änderungen an der design_default.html

Die beiden Dateien editor.css und editor.js müssen noch in den Head Eurer design_default.html. Dazu müsst Ihr im Head folgenden Code einfügen
HTML-Code:
1
2
<link href="design/scripts/bbedit/editor.css" rel="Stylesheet" type="text/css" />
<script src="design/scripts/bbedit/editor.js" type="text/javascript"></script>


Den Pfad natürlich dementsprechend anpassen wo Ihr die Dateien kopiert habt.

4) Änderung an der /user/myblog_addedit.html

Nachdem nun die benötigten Dateien inkludiert sind muss nun nur noch der Editor an der gewünschten Stelle ausgetauscht werden. Als Beispiel verwende ich die Datei in der der Editor für den Blog hinterlegt ist.

Dazu sucht ihr im Standard Template folgende Stelle:
HTML-Code:
1
2
3
4
5
6
7
8
9
10
11
12
<div class="editor">
                                <div style="float:right;">
                                <div><a href="javascript:field_collapse(document.forms.textform.text);"><img src="design/editor/field_collapse.gif" alt="{LANG[FIELDCOLLAPSE]}" title="{LANG[FIELDCOLLAPSE]}" /></a></div>
                                <div><a href="javascript:field_expand(document.forms.textform.text);"><img src="design/editor/field_expand.gif" alt="{LANG[FIELDEXPAND]}" title="{LANG[FIELDEXPAND]}" /></a></div>
                                </div>
                                <a href="javascript:simplecode('textinput','B');"><img src="design/editor/bold.gif" alt="{LANG[BOLD]}" title="{LANG[BOLD]}" /></a><a href="javascript:simplecode('textinput','I');"><img src="design/editor/italic.gif" alt="{LANG[ITALIC]}" title="{LANG[ITALIC]}" /></a><a href="javascript:simplecode('textinput','U');"><img src="design/editor/underline.gif" alt="{LANG[UNDERLINE]}" title="{LANG[UNDERLINE]}" /></a>
                                <img src="design/editor/spacer.gif" alt="" />
                                <a href="javascript:linkcodenew('textinput','URL');"><img src="design/editor/link.gif" alt="{LANG[LINK]}" title="{LANG[LINK]}" /></a><a href="javascript:linkcodenew('textinput','EMAIL');"><img src="design/editor/email.gif" alt="{LANG[EMAIL]}" title="{LANG[EMAIL]}" /></a>
                                <img src="design/editor/spacer.gif" alt="" />
                                <a href="javascript:simplecode('textinput','QUOTE');"><img src="design/editor/quote.gif" alt="{LANG[QUOTE]}" title="{LANG[QUOTE]}" /></a><a href="javascript:simplecode('textinput','CODE');"><img src="design/editor/code.gif" alt="{LANG[CODE]}" title="{LANG[CODE]}" /></a>
                                </div>
                                <textarea name="text" id="textinput" rows="20" style="width:98%;">{TEXT}</textarea>


Diesen Code ersetzt Ihr durch folgenden Code:

HTML-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="richeditor">
                                <div class="editbar">
                  <button title="bold" onclick="doClick('bold');" type="button"><b>B</b></button>
                  <button title="italic" onclick="doClick('italic');" type="button"><i>I</i></button>
                  <button title="underline" onclick="doClick('underline');" type="button"><u>U</u></button>
                  <button title="hyperlink" onclick="doLink();" type="button" style="background-image:url('/design/scripts/bbedit/images/url.gif');"></button>
                  <button title="image" onclick="doImage();" type="button" style="background-image:url('/design/scripts/bbedit/images/img.gif');"></button>
                  <button title="list" onclick="doClick('InsertUnorderedList');" type="button" style="background-image:url('/design/scripts/bbedit/images/icon_list.gif');"></button>
                  <button title="color" onclick="showColorGrid2('none')" type="button" style="background-image:url('/design/scripts/bbedit/images/colors.gif');"></button><span id="colorpicker201" class="colorpicker201"></span>
                  <button title="quote" onclick="doQuote();" type="button" style="background-image:url('/design/scripts/bbedit/images/icon_quote.png');"></button>
                  <button title="youtube" onclick="InsertYoutube();" type="button" style="background-image:url('/design/scripts/bbedit/images/icon_youtube.gif');"></button>
                  <button title="switch to source" type="button" onclick="javascript:SwitchEditor()" style="background-image:url('/design/scripts/bbedit/images/icon_html.gif');"></button>
                </div>
                </div>
                <textarea name="text" id="tbMsg" style="height:150px;width:100%;">{TEXT}</textarea>
                                <script type="text/javascript">
                  initEditor("tbMsg");
                </script>


Datei speichern.

So ab sofort habt Ihr nun einen WYSIWYG Editor als Blog Editor hinterlegt. Nun müsst Ihr noch die gewünschten Einstellungen in der css Datei vornehmen um diesen optisch an Euer Layout anzupassen.


Die Funktionen in der Script Datei versuche ich gerade anzupassen. Aber vielleicht ist ja einer von Euch etwas fitter in JS als ich es bin. Ich quäle mich grad durch den Code um zusätzliche Funktionen und Anpassungen vorzunehmen!

Grüße

Benny
pjfry ist offline  
 
nils1964
Kunde (Support beendet)
Danke, sehr benutzerfreundlich für alle User
nils1964 ist offline  
 
Freestate
Kunde (Support beendet)
Sieht schick aus ... aber so richtig funktioniert das noch nicht
Freestate ist offline  
 
pjfry
Kunde (Support beendet)
Zitat von Freestate:
Sieht schick aus ... aber so richtig funktioniert das noch nicht


Hi was funktioniert noch nicht richtig?

Denn an sich klappt bei mir es also von der Technik Seite her, nur leider bekomme ich noch nicht alle Funktionen (gerade im Bereich des Forums) richtig integriert. Die Standradfunktionen, die vom Editor Hersteller vorhanden sind klappen alle bei mir. Im Bereich des Gästebuches, des Blogs und der KOmmenatre setze ich diesen Editor schon ein.

Nur im Bereich des Forums, will es noch nicht ganz.

Naja vielleicht nimmt sich der Christian hier ein wenig Inspiration und entwickelt einen solchen Editor selbst für die nächste Apexx Version ;)

Ansonsten wäre ich froh, wenn sich hier noch jemand findet der Fitter in JS ist als ich, denn ich komme mit den Funktionen noch nicht ganz so klar zum inttegrieren!

Grüße

Benny
pjfry ist offline  
 
Freestate
Kunde (Support beendet)
Du ich habs nur kurz eingebaut und irgendwie hat der nicht immer den Text der eingegeben war in den Blog ubernommen, bin aber derzeit dermassen Erkältet das ich mir das auch nicht mehr weiter angeschaut habe.
Freestate ist offline  
 
pjfry
Kunde (Support beendet)
Achso ;)

Nun wie gesagt, der Blog, usw also überall wo dieser "abgespeckte" Editor hinterlegt ist sollte ohne Probleme funktionieren.

Ich habe das nun mehrfach anhand des Blogs getestet. Sowohl das editieren als auch das Neuerstellen klappt.

Aber vll. ist es ja bei Dir auch nur ein kleiner "Konfigurationsfehler", aber man soll ja auch nicht "krank" schaffen. Daher wünsche Dir erstmal ne gute Besserung und danach viel Erfolg beim einbauen des Editors ;)


PS

Was mir gerade aufgefallen ist, in meiner Anleitung habe ich vergessen zu erwähnen, dass man für manche Funktionen noch einen individuellen BBCode im Admin Bereich anlegen muss.

Werde das demnächst noch mit in dem Tutorial aufnehmen.


Grüße

Benny
pjfry ist offline  
Seiten (1): 1  
 
Suche Optionen
» Erweiterte Suche
Druckansicht Druckansicht