DeathGhost

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

这篇文章发布于2018年09月15日 18:09 星期六。 阅读 82 次 ,由 DeathGhost 编辑,归类于javascript »

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

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

孙志锋

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

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

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

💕与君共勉💕