itebob
Goto Top

Smileys in der Editiertoolbar

Hallo,

ich rege an in der Toolbar im Editierformular auf Smileys zu verlinken.

bildschirmfoto vom 2024-01-30 10-56-41

gruss, itebob

Content-Key: 42015719145

Url: https://administrator.de/contentid/42015719145

Printed on: May 1, 2024 at 10:05 o'clock

Member: colinardo
colinardo Jan 30, 2024 updated at 12:18:12 (UTC)
Goto Top
Servus.

Das hat ja eigentlich schon fast jeder per WIN + (Punkt) bzw. OS Funktionen oder in der Smartphone-Tastatur integriert.

Habe ich mir vor ein paar Monaten aber auch mal selbst per JavaScript (TamperMonkey/Greasemonkey) nachgerüstet :-P

screenshot

Grüße Uwe
Member: itebob
itebob Jan 30, 2024 at 10:13:43 (UTC)
Goto Top
Zitat von @colinardo:
Habe ich mir vor ein paar Monaten aber auch mal selbst per JavaScript nachgerüstet :-P

Kannst du deine Lösung hier zeigen?

gruss, itebob
Member: colinardo
colinardo Jan 30, 2024 updated at 10:53:09 (UTC)
Goto Top
Tampermonkey-/Greasemonkey - Userskript

// ==UserScript==
// @name         Add Emoji-Button to comment fields
// @namespace    https://administrator.de/
// @version      2023-02-16
// @description  try to take over the world with just a smile!
// @author       @colinardo
// @match        https://administrator.de/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function() {
    'use strict';  
    // CTRL Key state
    var ctrlKey = false;

    function AddEmojiButton(toolbar){
        // create toolbar button
        var btnEmot = $('<a class="edit-cmd " id="edit-cmd-pic-9998" title="Emoticons" href="#">πŸ˜€</a>');  
        // get current editfield
        //var editfield = toolbar.nextAll('div.edit-field').children('textarea')[0]; 
        var editfield = $(toolbar).parent().find('textarea')[0];  
        // get existing emoticon div
        var emot_list = $('#emot');  
        // create emoticon div

        var emolist = [];
        for (var i = 0x1F600; i <= 0x1F64F;i++){
            emolist.push(String.fromCodePoint(i));
        }
        var additionals = "πŸ––πŸ‘ŽπŸ‘πŸ€žπŸ‘ˆπŸ‘‰πŸ‘†πŸ‘‡πŸ‘ŒπŸŸβ˜•πŸš©πŸŒ";  
        Array.from(additionals).forEach((e) =>{
            emolist.push(e);
        });
        emot_list = $('<div id="emot" style="grid-template-columns: repeat(15, 1fr);grid-gap:5px;position:absolute;display:grid;border:1px solid gray;box-shadow:2px 2px 4px;width:auto;height:auto;z-index:9999;background-color:white;padding:5px;overflow-y:scroll"></div>').hide();  
        emot_list.on('click',function(e) {  
            if (!ctrlKey){
                $(this).hide();
            }
        });
        // monitor CTRL key for adding additional emoticons at once
        $(document).on('keyup keydown', function(e){ctrlKey = e.ctrlKey});  
        // action for each emoticon
        emolist.forEach(function(e){
            $('<div style="float:left;cursor:copy">' + e + '</div>').click(function(e){editfield.setRangeText($(this).text(),editfield.selectionStart,editfield.selectionEnd)}).appendTo(emot_list);  
        });
        emot_list.appendTo('body');  


        // btn press for toolbar button
        btnEmot.on('click',function(e) {  
            e.preventDefault();
            emot_list.css('left', $(this).offset().left + "px").css('top',($(this).offset().top + 40) + "px").toggle();  
        });
        btnEmot.appendTo(toolbar);
    }

    // add icon to already open comment fields
    $('form.add-comment').each(function(){  
        var cbar = $(this).find('div.edit-icons')[0];  
        AddEmojiButton(cbar);
    });

    // add icon to comment fields wich are activated by the user
    $('.comment-add-cmd').click(function(){  
        var id = $(this).attr('uniq-id');  
        if (!$('input-comment-' + id).hasClass('comment-edit')){  
            setTimeout(function(){
                var cbar = $('#input-comment-' + id + ' div.edit-icons');  
                AddEmojiButton(cbar);
            },200);
        }
    });
})();
Member: itebob
itebob Jan 30, 2024 at 11:18:03 (UTC)
Goto Top
Danke @colinardo πŸ‘πŸ‘Œ β˜• πŸŽ‚ . Funktioniert im Chromium Version 121.0.6167.85 . Andere Editoren haben ein Paar Smiles, Icons mehr. Aber man kann ja die Liste im JavaScript Klartext nach Lust und Laune erweitern πŸ™‚ .

bildschirmfoto vom 2024-01-30 12-16-41
Member: colinardo
colinardo Jan 30, 2024 updated at 11:50:15 (UTC)
Goto Top
Aber man kann ja die Liste im JavaScript Klartext nach Lust und Laune erweitern πŸ™‚ .
So war es gedacht, ich hätte auch alle da rein quetschen können dann würde man aber way zu viel Zeit mit dem Scrollen und Suchen des passenden Emojis verschwenden und sooo wichtig sind die dann nun doch nicht face-smile, deswegen nur die Liste von 0x1F600 bis 0x1F64F und die zusätzlich in der "additionals" Variablen definierten, kann jeder nach seinem Gusto anpassen.
Member: aqui
aqui Jan 30, 2024 at 11:54:12 (UTC)
Goto Top
Kannst du deine Lösung hier zeigen?
Bei Safari ist es ohne Frickelei schon mit an Bord wenn man <ctrl><command> und Leertaste drückt! πŸ˜‰
Member: colinardo
colinardo Jan 30, 2024 updated at 12:17:39 (UTC)
Goto Top
Zitat von @aqui:

Kannst du deine Lösung hier zeigen?
Bei Safari ist es ohne Frickelei schon mit an Bord wenn man <ctrl><command> und Leertaste drückt! πŸ˜‰

Ja wie gesagt, hat das heutzutage eigentliche jedes halbwegs aktuelle OS schon mit an Bord, das war damals eigentlich nur eine Fingerübung um mein JavaScript-Knowledge nur wieder etwas aufzufrischen face-wink.
Member: em-pie
em-pie Jan 30, 2024 at 12:11:38 (UTC)
Goto Top
Moin,

Und Windows + . klappt auch hier im Board unter Windows 10/ 11
Member: itebob
itebob Jan 30, 2024 updated at 12:57:06 (UTC)
Goto Top
Ubuntu:
  • Windows-Taste, dann im Suchfeld "Aktivitäten" als Suchstring "Zeichen" eingeben; πŸ’‘es öfnet sich ein Fenster mit einer komfortablen Navigation in der umfangreichen Icons-Sammlung πŸƒ 🐈 πŸ‰ 🍁 πŸ™‚
weitere Möglichkeiten
Member: Penny.Cilin
Penny.Cilin Jan 30, 2024 at 15:03:15 (UTC)
Goto Top
@colinardo
Tampermonkey-/Greasemonkey - Userskript
??? Ich stehe jetzt auf dem Schlauch. face-confused

Gruss Penny.
Member: colinardo
colinardo Jan 30, 2024 updated at 15:08:47 (UTC)
Goto Top
Zitat von @Penny.Cilin:

@colinardo
Tampermonkey-/Greasemonkey - Userskript
??? Ich stehe jetzt auf dem Schlauch. face-confused

Gruss Penny.

Das sind Browser AddOns für Userscripts πŸ˜‰

Chrome

https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjoje ...

Firefox

https://addons.mozilla.org/de/firefox/addon/tampermonkey/

Edge

https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpa ...

Grüße Uwe