DeathGhost

借助ES6中export和import通过execCommand方法实现一个可插入emoji表情的简易消息窗口

这篇文章发布于 2018年09月15日 18:09 星期六 阅读 574 次,评论 0 条

DeathGhost 编辑,归类于javascript »

此文主要提及几个知识点,没有可研究价值,具体的方法可以查看相关文档;本文主要将emoji表情单独列于js文件export后,通过import将其导入,对其表情渲染输出;可运用在web文本信息聊天或邮件类场景。
emoji表情的简易消息窗口

web页面中添加运行js脚本时,我们通常添加<script>即可,如下:

<!-- 页面内嵌的脚本 --> 
<script type="application/javascript">
  // ...
</script>
<!-- 外部脚本 -->
<script type="application/javascript" src="./xx.js">
// ...
</script>

默认情况可以不书写 'type="application/javascript"'。

而浏览器加载ES6模板,同样也是使用<script>标签,但是要加入type = "module"属性,同时它属于异步加载,不会产生堵塞。

下面看看一个“web端发送消息窗口”小实例。

chat emoji
web端发送消息窗口小实例

首先创建一个emoji.js文件,将emoji表情符罗列进去,将其导出:

const emojiList = [
  {name: 'Grinning Face', label: '😀'},
  {name: 'Beaming Face With Smiling Eyes', label: '😁'},
  {name: 'Face With Tears of Joy', label: '😂'},
  {name: 'Rolling on the Floor Laughing', label: '🤣'},
  {name: 'Grinning Face With Big Eyes', label: '😃'},
  {name: 'Grinning Face With Smiling Eyes', label: '😄'},
  {name: 'Grinning Squinting Face', label: '😆'},
  {name: 'Winking Face', label: '😉'},
  {name: 'Smiling Face With Smiling Eyes', label: '😊'},
  {name: 'Face Savoring Food', label: '😋'},
  {name: 'Smiling Face With Sunglasses', label: '😎'},
  {name: 'Smiling Face With Heart-Eyes', label: '😍'},
  {name: 'Face Blowing a Kiss', label: '😘'},
  {name: 'Kissing Face', label: '😗'},
  // ... more ...
];
export { emojiList }

在html构建一个简单发送消息结构:

*{font-family: 'microsoft yahei';font-size:12px;box-sizing:border-box;}
ul{margin:10px 0;padding:0;list-style:none;overflow:hidden;}
.textEditor{width:640px;margin:0 auto;}
.textEditor li{float:left;font-size:22px;margin-right:5px;cursor:pointer;}
.textEditor textarea{width:100%;padding:10px;resize:none;font-size:15px;}
<div class="textEditor">
    <ul></ul>
    <textarea cols="30" rows="10" placeholder="在此输入..."></textarea>
    <button onclick="submit()">发送消息</button>
</div>

最后通过脚本将其渲染出来即可。

<script type="module">
    // import emoji ...
    import { emojiList } from './emoji.service.js';
    // output ...
    const emoji = document.querySelector('.textEditor ul');
    let _li = '';
    for (const item of emojiList) {
        _li  = `<li onclick="insertEmoji('${item.label}')" title="${item.name}">${item.label}</li>`;
    }
    emoji.insertAdjacentHTML('beforeend', _li);
</script>
<script>
    // insert it ...
    function insertEmoji(str) {
        const editor = document.querySelector('.textEditor textarea');
        editor.focus();
        document.execCommand('insertText', false, str);
    }
    // save ...
    function submit() {
        console.log(document.querySelector('.textEditor textarea').value);
    }
</script>

更多的document.execCommand中的一些命令可以查看具体文档,这里就不多言了;借用这个方法可以做一个简单的富文本编辑器,如:加粗,倾斜,字号...

commands = [
  {'cmd': 'bold', 'desc': '加粗'},
  {'cmd': 'copy', 'desc': '复制'},
  {'cmd': 'cut', 'desc': '剪切'},
  {'cmd': 'delete', 'desc': '删除'},
  {'cmd': 'fontSize', 'val': '1-7', 'desc': '字号'},
  {'cmd': 'insertText', 'val': new Date(), 'desc': '插入文本'},
  {'cmd': 'italic', 'icon': 'italic', 'desc': '斜体'},
  {'cmd': 'strikeThrough', 'desc': '删除线'},
  {'cmd': 'underline', 'desc': '下划线'},
];
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕