IMG BBCode Button im Chat einfügen

1. offizieller Beitrag

    Hallo...


    Einer meiner User wünscht sich im Chat einen zuzätzlichen Button, da er mit dem BBCode schon mal Tippfehler machte (ich übrigens auch :D ). Die Funktion soll folgendermaßen aussehen. Wenn man auf diesen Button klickt erscheint sofort der IMG BBCODE im Eingabefeld.



    Um es leichter erklärbar zu machen habe ich mit Firebug einen solchen Button eingefügt, einen Screen gemacht, und dann dort Beschriftungen eingefügt. Könnte ich so einen Funktions Button einfügen, der bei Klick was bestimmtes ins Feld einfügt? Wenn ja, welches Template müsste ich ändern und genau was müsste ich dort ändern?


    Liebe Grüße

    Hast du Erfahrungen mit Pluginentwicklung? Du könntest nämlich dein gewünschtes Feature wunderschön als Plugin nachrüsten, damit du nicht extra an dem Originaltemplate rumfummeln musst.


    Du kannst mit Hilfe des buttons Events im chat.tpl weitere Buttons hinzufügen. Das sieht ungefähr so aus:



    in dem __imageButton.tpl fügt du dann ganz normal den Button ein:


    Code
    <li id="imageButton">
    <a class="button jsTooltip" title="Bild einfuegen">
        <span class="icon icon16 icon-comments"></span>
        <span class="invisible">Bild einf&uuml;gen</span>
    </a>
</li>


    Nun musst du nur noch dem Button eine Funktion geben. Das machen wir mir JavaScript. Ergänze den Templatelistener damit:


    Code
    <templatelistener name="imageScriptInclude">
            <environment>user</environment>
            <templatename>javascriptInclude</templatename>
            <eventname>javascript</eventname>
            <templatecode><![CDATA[{include file='__imageJavascript' application='chat'}]]></templatecode>
        </templatelistener>


    das dazugehörige Template


    Code
    <script data-relocate="true" src="{@$__wcf->getPath('chat')}js/imageJavascript.js"></script>


    in dem imageJavascript.js muss nun die Funktion rein, womit dem Klicken des Buttons die IMG-Tags auftauchen. Wir machen dazu von der insertText Funktion zunutze:


    Code
    (function() {
  (function($, window) {   
     //ImageAdd
      $('#imageButton').on('click', 'li', function() {
        return be.bastelstu.Chat.insertText("(IMG)(/IMG)"); // <- hier bitte die Klammern korrigieren. hier im Forum darf man die IMG Tags nicht verwenden
      });
  })(jQuery, this);


}).call(this);


    Dann müsste eigentlich alles laufen. Sagt mir bescheid, wenn sich hier Fehler eingeschlichen haben :whistling:

    • Offizieller Beitrag

    Hallo,


    falls du nicht gleich ein kleines Paket bauen und es über die Template-Verwaltung erledigen möchtest, kannst du auch folgenden Weg nehmen:


    Öffne in der Template-Verwaltung das chat.tpl und suche nach diesen beiden Zeilen:

    Code
    <nav class="jsMobileNavigation buttonGroupNavigation">
	<ul class="buttonGroup">


    Darunter kannst du dann folgenden Code einfügen:

    Code
    <li>
	<a id="timsChatInsertImage" accesskey="i" class="button jsTooltip" title="{lang}some.language.variable{/lang}" onclick="javascript:be.bastelstu.Chat.insertText('[img ][/img]');">
		<span class="icon icon16 icon-picture"></span>
		<span class="invisible">{lang}some.language.variable{/lang}</span>
	</a>
</li>


    Anpassen musst du dann noch die Sprachvariablen (soweit ich weiß, gibt es keine mit dem Inhalt „Bild“) und dort im onclick den [img]-BBCode (das Leerzeichen entfernen), da der MessageParser hier meinte den BBCode im Code-BBCode interpretieren und mir verbieten zu wollen :(


    @ProtippSchorsch: Der Chat exportiert einige Funktionen nach außen, insertText ist eine davon. Diese kann einfach über be.bastelstu.Chat.insertText aufgerufen werden.

    Hallo ihr Zwei,


    danke erstmal für eure ausführlichen Antworten und entschuldigt mir bitte die verspätete Antwort. Ich habe natürlich sofort den Button eingebaut (vor Wochen erstmal den kurzen Weg), wie es Max mir beschrieb. Leider habe ich noch keine Erfahrung mit Pluginentwicklungen, aber hätte natürlich echt Lust mich da fortzubilden. Ich habe zwar versucht die Anleitung von dir ProtippSchorsch umzusetzen, aber irgendwie komme ich gerade an einer gewissen Stelle nicht weiter. Dazu unten mehr.


    @ProtippSchorsch


    Eins vorab, was für Button-Ideen hättest du denn für mich, die man als praktisch bezeichnet für den Chat gebrauchen kann? :)


    Ich bin nahezu eigentlich sehr weit (habs jetzt mal genau versucht so zu machen), der Button taucht schon im Chat auf, aber wo finde ich den Script imageJavascript.js ? Oder muss ich den extra erstellen? Hab auf dem Server bei FileZilla den Namen eingegeben, aber finde den nicht.


    @Max


    Vielen lieben Dank für deine Hilfe. :thumbup: Falls der User ProtippSchorsch länger nicht online sein sollte, weisst du auf die Frage oben eine Antwort? :)



    Liebe Grüße Ted :)

    Hiho,


    den imageScript.js müsstest du tatsächlich selber erstellen und in chat/js Verzeichnis packen ;) In dem Script steht dann einfach, was der Chat machen soll, wenn auf dein Image Button gedrückt wird. Den Quellcode dazu habe ich ja gepostet :D Wenn du den Script erstellt hast drüfte dann alles Klappen. Dann kannst du dir auf di Schulter klopfen :thumbup:


    Was die Button-Ideen angehen: Ich habe in meinem Chat einen BB-Code Button eingefügt, womit man bestimmte BB-Codes einfügen kann: BB-Code Dropdown Menü
    (hier wird aber noch nicht berücksichtigt, ob der User die Codes verwenden darf oder nicht)


    Wenn du Interesse hast, kann ich dir das Paket ja geben. Ich müsste es nur noch etwas anpassen, da in dem Paket noch weiteres, lustiges Zeugs drin ist :whistling: Es kann aber sein, dass es etwas dauern wird (die Uni raubt gerne meine Zeit. Sie findet das schon seit einigen Semestern ganz amüsant ;( ).