借助ES6中export和import通过execCommand方法实现一个可插入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端发送消息窗口”小实例。

首先创建一个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': '下划线'},
    ];