Suche
Teilen
startseite » forum

[Frage] Smilie (als ASCII Zeichen) per Klick ins Formular eintragen TYPO3-Version: 6.1.7

  • MrSpock MrSpock
    T3PO
    0 x
    14 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 14:40

    Hallo,

    habe das Plugin ve_guestbook installiert und das Formular und eine Liste auf die Gästebuch-Seite gepackt. Dazwischen zeige ich die möglichen Smilies als gif Bilder an. Kann man mit typo3 Boardmitteln erreichen, dass beim Anklicken eines Smilies sein Ascii Code ins Nachrichtenformular eingetragen wird?

  • 1
  • toifel toifel
    Jedi-Ratsmitglied
    0 x
    831 Beiträge
    96 Hilfreiche Beiträge
    03. 09. 2014, 14:55

    Ist zwar kein "Boardmittel", aber mit wenigen Zeilen Javascript/jQuery sollte das ohne großen Aufwand machbar sein. Eine eigene Extension gibt es dafür wahrscheinlich nicht - sowas hier sollte aber auch reichen: http://www.html.de/threads/smileys-bei-klick-ins-gaestebuchtextfeld-einfuegen.15409/

  • MrSpock MrSpock
    T3PO
    0 x
    14 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 20:04

    Das scheint ein guter Link zu sein.

    Ich bekomme es wohl hin, den PHP Code einzufügen. Die Smilies habe ich als Inhalt (Nur Bilder) eingefügt. Ich müsste aber jetzt in das Image Tag noch den Zusatz

    1. onclick="insert('x.gif');

    wobei x = 1, 2, .. ,17 jeweils angepasst an den Namen der GIF Datei, einfügen.

    Wie bekomme ich das hin?

  • MrSpock MrSpock
    T3PO
    0 x
    14 Beiträge
    0 Hilfreiche Beiträge
    04. 09. 2014, 08:50

    Meine Idee ist es über typoscript einen zusätzlichen Parameter beim Einfügen der <img> zu setzen. Dazuhabe ich im Template für das Rendern eines einzelnen Bildes folgenden Code gefunden:

    1. layoutKey = {$styles.content.imgtext.layoutKey}
    2. 801: 		layout {
    3. 802: 			default {
    4. 803: 				element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###"###PARAMS######ALTPARAMS######BORDER######SELFCLOSINGTAGSLASH###>
    5. 804: 			}
    6. 805: 			srcset {
    7. 806: 				element = <img src="###SRC###" srcset="###SOURCECOLLECTION###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
    8. 807: 				source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
    9. 808: 			}
    10. 809: 			picture {
    11. 810: 				element = <picture>###SOURCECOLLECTION###<img src="###SRC###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###></picture>
    12. 811: 				source = <source src="###SRC###" media="###MEDIAQUERY###"###SELFCLOSINGTAGSLASH###>
    13. 812: 			}
    14. 813: 			data {
    15. 814: 				element = <img src="###SRC###"###SOURCECOLLECTION######PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
    16. 815: 				source = data-###DATAKEY###="###SRC###"
    17. 816: 				source.noTrimWrap = ; ;;
    18. 817: 				source.noTrimWrap.splitChar = ;
    19. 818: 			}
    20. 819: 		}

    Es wird also immer ein ###PARAMS### ersetzt, wenn ich das richtig erkenne.

    Im ObjektBrowser habe ich gesehen, dass der PARAM folgenden Wert hat:

    1. plugin.tx_veguestbook_pi1.emoticons.10.params = hspace="1" vspace="1"

    und habe in TS folgende Änderung gemacht:

    1. 10.params = hspace="1" vspace="1" onclick="insert(###EMOTICON###)"

    damit möchte ich die JS Funktion insert aufrufen und als Parameter den val übergeben, der im subst ermittelt wird (z.B.):

    1. subst {
    2.     11.str = :) || :-)
    3.     11.val = 1

    Aber der Parameter, den ich oben in 10.params setze, erscheint nicht im HTML Code der Seite.

  • MrSpock MrSpock
    T3PO
    0 x
    14 Beiträge
    0 Hilfreiche Beiträge
    05. 09. 2014, 09:04

    Also ich hab' jetzt eine Lösung erarbeitet, mit der ich leben kann und möchte diese hier erläutern, falls jemand dieselbe Herausforderung hat:

    Zunächst einmal habe ich die Smilie-Bildersammlung als Inhaltselement "Nur Bilder" wieder gelöscht, weil ich den einzelnen Bildern eben den onclick Parameter nicht zuweisen konnte.

    Zwischen dem Inhaltselement ve_guestbook als Formular und dem ve_guestbook als Liste habe ich jetzt ein neues HTML Element eingefügt, über das ich die Smilies lade:

    1. <div class="csc-header csc-header-n3"><h4 class="csc-header-alignment-center">Smilies zum Einfügen Anklicken</h4></div>
    2. <div class="csc-textpic csc-textpic-center csc-textpic-above"><div class="csc-textpic-imagewrap" data-csc-images="17" data-csc-cols="6"><div class="csc-textpic-center-outer"><div class="csc-textpic-center-inner"><div class="csc-textpic-imagerow">
    3. <div class="csc-textpic-imagecolumn csc-textpic-firstcol"><img src="fileadmin/user_upload/1.gif" width="15" height="15" alt="" onclick="insert(':)');"></div>
    4. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/7.gif" width="15" height="15" alt="" onclick="insert(':S');"></div>
    5. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/12.gif" width="15" height="18" alt="" onclick="insert(':holy:');"></div>
    6. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/14.gif" width="15" height="15" alt="" onclick="insert('|-)');"> </div>
    7. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/10.gif" width="15" height="15" alt="" onclick="insert(':bandit:');"> </div>
    8. <div class="csc-textpic-imagecolumn csc-textpic-lastcol"><img src="fileadmin/user_upload/16.gif" width="15" height="15" alt="" onclick="insert(':cry:');"> </div></div>
    9. <div class="csc-textpic-imagerow"><div class="csc-textpic-imagecolumn csc-textpic-firstcol"><img src="fileadmin/user_upload/3.gif" width="15" height="15" alt=""onclick="insert(':0');"> </div>
    10. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/15.gif" width="15" height="19" alt="" onclick="insert(':devil:');"> </div>
    11. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/11.gif" width="15" height="16" alt="" onclick="insert(':happy:');"> </div>
    12. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/6.gif" width="15" height="15" alt="" onclick="insert(':|');"> </div>
    13. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/2.gif" width="15" height="15" alt="" onclick="insert(';)');"> </div>
    14. <div class="csc-textpic-imagecolumn csc-textpic-lastcol"><img src="fileadmin/user_upload/9.gif" width="15" height="15" alt="" onclick="insert(':confused:');"> </div></div>
    15. <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><div class="csc-textpic-imagecolumn csc-textpic-firstcol"><img src="fileadmin/user_upload/8.gif" width="15" height="15" alt="" onclick="insert(':/');"> </div>
    16. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/5.gif" width="15" height="15" alt="" onclick="insert('8)');"> </div>
    17. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/17.gif" width="15" height="15" alt="" onclick="insert(':shock:');"> </div>
    18. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/4.gif" width="15" height="15" alt="" onclick="insert(':D');"> </div>
    19. <div class="csc-textpic-imagecolumn"><img src="fileadmin/user_upload/13.gif" width="15" height="20" alt="" onclick="insert(':irokese:');"> </div>
    20. <div class="csc-textpic-imagecolumn csc-textpic-lastcol">&nbsp;</div></div></div></div></div></div>

    Dabei habe ich eben den onclick Parameter eingetragen, der eine JavaScript Funktion aufruft. Diese binde ich über TS speziell für die Gästebuchseite wie folgt ein:

    1. [globalVar = TSFE:id = 67]
    2. page {
    3. jsInline.20 = TEXT
    4.   jsInline.20.value (
    5.      function insert(tag) {
    6.        document.forms[0].message.value += " "+tag +" ";
    7.        document.forms[0].message.focus();
    8.      }
    9.   )
    10. }
    11. [GLOBAL]

    Dabei muss in der Condition für TSFE:id eure ID der Gästebuchseite eingetragen werden.

    Als letztes muss noch die Ersetzung der ASCII Codes in den Beiträgen durch die Smilies erzeugt werden. Das geht wieder über TS:

    1. plugin.tx_veguestbook_pi1 {
    2.   datetime_stdWrap.strftime = %A, %d.%m.%y %H:%M
    3.   date_stdWrap.strftime = %d.%m.%y
    4.   time_stdWrap.strftime = %H:%M
    5. }
    6.  
    7. plugin.tx_veguestbook_pi1.emoticons {
    8.   active = 1
    9.   10.file = fileadmin/user_upload/###EMOTICON###.gif
    10.   subst {
    11.     11.str = :) || :-)
    12.     11.val = 1
    13.  
    14.     12.str = ;) || ;-)
    15.     12.val = 2
    16.  
    17.     13.str = :-0 || :0 || :-O || :O
    18.     13.val = 3
    19.  
    20.     14.str = :D
    21.     14.val = 4
    22.  
    23.     15.str = 8) || 8-)
    24.     15.val = 5
    25.  
    26.     16.str = :| || :-|
    27.     16.val = 6
    28.  
    29.     17.str = :S || :-S
    30.     17.val = 7
    31.  
    32.     18.str = :/ || :-/
    33.     18.val = 8
    34.  
    35.     19.str = :confused:
    36.     19.val = 9
    37.  
    38.     20.str = :bandit:
    39.     20.val = 10
    40.  
    41.     21.str = :happy:
    42.     21.val = 11
    43.  
    44.     22.str = :holy:
    45.     22.val = 12
    46.  
    47.     23.str = :irokese:
    48.     23.val = 13
    49.  
    50.     24.str = |-)
    51.     24.val = 14
    52.  
    53.     25.str = :devil:
    54.     25.val = 15
    55.  
    56.     26.str = :cry:
    57.     26.val = 16
    58.  
    59.  
    60.     27.str = :shock:
    61.     27.val = 17
    62.   }
    63. }

    Jetzt wird beim Anklicken eines Smilies der entsprechende ASCII Code in das Nachrichtenfeld geschrieben.

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin