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

这篇文章由 DeathGhost 编辑,发布于

归类于 Javascript » 👋分享到微博 当前评论 0 条。

此文主要提及几个知识点,没有可研究价值,具体的方法可以查看相关文档;本文主要将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': '下划线'},
    ];

JavaScript ECMAScript ES6 import export emoji execCommand 聊天 表情 发送表情消息

上一篇:

下一篇: