ckeditor5 添加emoji表情的步骤:
1、定义emoji表情:
const EMOJIS_ARRAY = [ { character: '🙈', title: 'See-No-Evil Monkey' }, { character: '🙄', title: 'Face With Rolling Eyes' }, { character: '🙃', title: 'Upside Down Face' }, { character: '🙂', title: 'Slightly Smiling Face' }, { character: '😴', title: 'Sleeping Face' }, { character: '😳', title: 'Flushed Face' }, { character: '😱', title: 'Face Screaming in Fear' }, { character: '😭', title: 'Loudly Crying Face' }, { character: '😬', title: 'Grimacing Face' }, { character: '😩', title: 'Weary Face' }, { character: '😢', title: 'Crying Face' }, { character: '😡', title: 'Pouting Face' }, { character: '😞', title: 'Disappointed Face' }, { character: '😜', title: 'Face with Stuck-Out Tongue and Winking Eye' }, { character: '😚', title: 'Kissing Face With Closed Eyes' }, { character: '😘', title: 'Face Throwing a Kiss' }, { character: '😔', title: 'Pensive Face' }, { character: '😒', title: 'Unamused Face' }, { character: '😑', title: 'Expressionless Face' }, { character: '😐', title: 'Neutral Face' }, { character: '😏', title: 'Smirking Face' }, { character: '😎', title: 'Smiling Face with Sunglasses' }, { character: '😍', title: 'Smiling Face with Heart-Eyes' }, { character: '😌', title: 'Relieved Face' }, { character: '😋', title: 'Face Savoring Delicious Food' }, { character: '😊', title: 'Smiling Face with Smiling Eyes' }, { character: '😉', title: 'Winking Face' }, { character: '😈', title: 'Smiling Face With Horns' }, { character: '😇', title: 'Smiling Face with Halo' }, { character: '😆', title: 'Smiling Face with Open Mouth and Tightly-Closed Eyes' }, { character: '😅', title: 'Smiling Face with Open Mouth and Cold Sweat' }, { character: '😄', title: 'Smiling Face with Open Mouth and Smiling Eyes' }, { character: '😃', title: 'Smiling Face with Open Mouth' }, { character: '😂', title: 'Face with Tears of Joy' }, { character: '😁', title: 'Grinning Face with Smiling Eyes' }, { character: '😀', title: 'Grinning Face' }, { character: '🥺', title: 'Pleading Face' }, { character: '🥵', title: 'Hot Face' }, { character: '🥴', title: 'Woozy Face' }, { character: '🥳', title: 'Partying Face' }, { character: '🥰', title: 'Smiling Face with Hearts' }, { character: '🤭', title: 'Face with Hand Over Mouth' }, { character: '🤪', title: 'Zany Face' }, { character: '🤩', title: 'Grinning Face with Star Eyes' }, { character: '🤦', title: 'Face Palm' }, { character: '🤤', title: 'Drooling Face' }, { character: '🤣', title: 'Rolling on the Floor Laughing' }, { character: '🤔', title: 'Thinking Face' }, { character: '🤞', title: 'Crossed Fingers' }, { character: '🙏', title: 'Person with Folded Hands' }, { character: '🙌', title: 'Person Raising Both Hands in Celebration' }, { character: '🙋', title: 'Happy Person Raising One Hand' }, { character: '🤷', title: 'Shrug' }, { character: '🤗', title: 'Hugging Face' }, { character: '🖤', title: 'Black Heart' }, { character: '🔥', title: 'Fire' }, { character: '💰', title: 'Money Bag' }, { character: '💯', title: 'Hundred Points Symbol' }, { character: '💪', title: 'Flexed Biceps' }, { character: '💩', title: 'Pile of Poo' }, { character: '💥', title: 'Collision' }, { character: '💞', title: 'Revolving Hearts' }, { character: '💜', title: 'Purple Heart' }, { character: '💚', title: 'Green Heart' }, { character: '💙', title: 'Blue Heart' }, { character: '💗', title: 'Growing Heart' }, { character: '💖', title: 'Sparkling Heart' }, { character: '💕', title: 'Two Hearts' }, { character: '💔', title: 'Broken Heart' }, { character: '💓', title: 'Beating Heart' }, { character: '💐', title: 'Bouquet' }, { character: '💋', title: 'Kiss Mark' }, { character: '💀', title: 'Skull' }, { character: '👑', title: 'Crown' }, { character: '👏', title: 'Clapping Hands Sign' }, { character: '👍', title: 'Thumbs Up Sign' }, { character: '👌', title: 'OK Hand Sign' }, { character: '👉', title: 'Backhand Index Pointing Right' }, { character: '👈', title: 'Backhand Index Pointing Left' }, { character: '👇', title: 'Backhand Index Pointing Down' }, { character: '👀', title: 'Eyes' }, { character: '🎶', title: 'Multiple Musical Notes' }, { character: '🎊', title: 'Confetti Ball' }, { character: '🎉', title: 'Party Popper' }, { character: '🎈', title: 'Balloon' }, { character: '🎂', title: 'Birthday Cake' }, { character: '🎁', title: 'Wrapped Gift' }, { character: '🌹', title: 'Rose' }, { character: '🌸', title: 'Cherry Blossom' }, { character: '🌞', title: 'Sun with Face' }, { character: '❤️', title: 'Red Heart' }, { character: '❣️', title: 'Heavy Heart Exclamation Mark Ornament' }, { character: '✨', title: 'Sparkles' }, { character: '✌️', title: 'Victory Hand' }, { character: '✅', title: 'Check Mark Button' }, { character: '♥️', title: 'Heart Suit' }, { character: '☺️', title: 'Smiling Face' }, { character: '☹️', title: 'Frowning Face' }, { character: '☀️', title: 'Sun' } ];
2、在编辑器初始化回调中追加:
Editor.create(document.getElementById("ck-editor"), { // 相关配置... }).then((e) => { editor = e // emotion editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', EMOJIS_ARRAY ); }) })
最终效果: