首页 > 建站教程 > 编辑器、IDE >  ckeditor5 添加emoji表情正文

ckeditor5 添加emoji表情

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 );
  })
})


最终效果:

ckeditor5