65.9K
CodeProject 正在变化。 阅读更多。
Home

mojiWriter：一款让您在撰写帖子/文档/电子邮件时更轻松地使用和管理表情符号的应用程序

raddevus
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2021年1月25日

CPOL

7分钟阅读

viewsIcon

6070

downloadIcon

92

学习如何使用HTML、JavaScript、CSS构建一个应用程序，该应用程序稍后将在桌面上运行。

引言

我使用Ubuntu 20.04作为我的主要开发机器。我使用Remmina（RDP软件）远程连接到Win10机器进行工作。

有时我想在文档或电子邮件中使用表情符号，但没有一个很好的解决方案可以快速复制和粘贴表情符号。我决定自己创建一个。是的，在Win10上，Windows键/逗号可以调出表情符号面板，但在Ubuntu上不行。

此外，Win10版本的限制是您无法添加新的表情符号（我的应用程序提供了此功能）。

背景

一个周末项目变成了一个完整的应用程序。我还认为这可能是一个很好的应用程序，可以展示仅使用HTML、JavaScript和CSS创建完整应用程序是多么容易，以及Bootstrap（预制按钮等）如何让事情变得更容易。

没有部署挑战

当然，用HTML创建应用程序的巨大优势是没有部署挑战。人们只需将浏览器指向该应用程序即可使用。

立即尝试

您可以立即尝试该应用程序，这样您就可以了解它的功能。

只需将浏览器指向我的网站：https://newlibre.com/mojiWriter[^]。

用法

  1. 只需点击一个或多个表情符号，右键单击并选择复制，它们就可以粘贴到您的文档中。
  2. 当您选择它们使用时，它们将被添加到您的[最近使用]列表中，从而更容易使用常用表情符号。
  3. 稍后，当您遇到一个想要保存以供自己使用的表情符号时，您可以复制它并将其添加到应用程序中。
    1. 点击自定义选项卡。
    2. 粘贴您想要保存的表情符号。
    3. 点击[保存]按钮。它将被写入您的localStorage，因此它将始终在此处随时可用。

让我们点击XX-Large按钮（使表情符号更大，更容易看到细节）。接下来，我们选择一个新添加的表情符号并检查[最近使用]列表，我们看到它们显示在列表中。

应用程序要求

最初，我只想要一件事

  • 一种轻松选择和复制表情符号到我正在输入的文档中的方法。

但是，当我开始开发该应用程序时，我想要更多功能。

  • 一种查看和获取最近使用的表情符号（我常用的）的方法
  • 将相似表情符号分组的UI，以便我更容易找到它们
  • 一种以更大尺寸查看表情符号的方法
  • 一种将新表情符号添加到自定义列表的方法，以便我可以扩展我可以使用表情符号
  • 一种一次选择多个表情符号的方法（点击所有您想要的表情符号，右键单击并复制）。
  • 使用Bootstrap将其创建为纯HTML5（HTML、JavaScript、CSS）
  • 通过Github上的FOSS（完全开源软件）提供^。
  • 作为桌面应用程序运行（通过ElectronJS）

我是这样构建它的

通过Bootstrap获取基本应用程序样式

我做的第一件事是访问Bootstrap网站并查看导航和选项卡区域。如果您查看那里的示例，您会发现它是通过他们称为左侧药丸的基本选项卡。

我将相关的HTML复制到我的index.htm中。

重要的是，当点击左侧的药丸按钮时，它会激活右侧相关的div。它非常易于使用。只需用您希望在点击药丸按钮时显示的HTML填充每个相关的div部分。

WinForms对比

我也是一个WinForms开发人员，在HTML/Bootstrap中创建此功能要容易得多，而且看起来也更好。有些东西确实比WinForms更好。深呼吸，今天学习一些新东西。😉

表情选项卡上的静态表情符号

这是我添加的所有静态表情符号的超简单代码。

这是您可以在本文源代码中看到的部分快照。

<div class="tab-pane fade show active emoji" id="v-pills-faces" 
          role="tabpanel" aria-labelledby="v-pills-faces-tab">
<span onclick="handleEmojiClick(this)">&#128512;</span>
<span onclick="handleEmojiClick(this)">&#128513;</span>
<span onclick="handleEmojiClick(this)">&#128514;</span>
<span onclick="handleEmojiClick(this)">&#128515;</span>
<span onclick="handleEmojiClick(this)">&#128516;</span>
<span onclick="handleEmojiClick(this)">&#128517;</span>
...
</div>

您可以看到我为每个表情符号都包含了实体字符代码。

我还选择添加一个简单的handleEmojiClick()方法调用，该方法传递当前点击的元素（this）。这使得通过一些JavaScript轻松确保表情符号字符显示为屏幕上选定的项目（请参阅带有橙色块的冻结面孔）。

这是进行字符选择的JavaScript，以便当用户复制字符时，字符将被复制到剪贴板。

function selectElementContents() {

    allSelectedElements.forEach(el => {
       var range = document.createRange();
       range.selectNodeContents(el);
       var sel = window.getSelection();
       sel.addRange(range);
    });
}

allSelectedElements是一个数组。Array的JavaScript forEach()方法将数组的每个元素传递给您的函数（此处为箭头函数）=>{}。在这种情况下，传入的每个项（el）都是一个包含表情符号字符的HTML元素。我们用它来创建一个文档范围，这将允许我们选择元素节点内容（每个单独的表情符号字符）。

主要功能

这是我最初想要的主要功能。我只是想要一种简单的方法将一个或多个表情符号复制到我的剪贴板，以便我在发帖、发送电子邮件或撰写文档时使用它们。奇怪的是，这不像您想象的那么容易获得。但是，当然，表情符号真的没那么重要。或者，它们重要吗？😄😎🤑🤪 💥🐳🤓 😂😂😂

其他有趣的部分

其他有趣的部分是我

  1. 允许您添加自定义表情符号
  2. 创建一个最近使用列表
  3. 将所有内容存储在localStorage中，以便当您重新加载时，您仍然拥有自定义表情符号和其他设置（例如使用XX-Large查看表情符号的细节）

添加自定义表情符号

您可以从任何地方获取自定义表情符号。通过自定义，我只是说那些不在我的静态HTML中的（因为我太懒了，无法全部输入）。

Emojipedia^是一个非常酷的资源。您可以去那里复制表情符号，然后将它们粘贴到mojiWriter中，您将永远拥有它们。永远！好吧，只要您使用相同的网络浏览器访问我的网站，并且您的localStorage没有被清除。

代码有点酷

自定义表情符号的代码有点酷，因为我必须想出一种方法，当您添加新的表情符号时，代码仍然会

  1. 将自定义表情符号添加到最近使用列表
  2. 确保它们被正确选择以进行复制
  3. 确保它们在自定义选项卡上正确显示。

我是这样做的。

  1. 添加了一种将它们保存到localStorage的方法。
  2. 加载页面时，我从localStorage获取自定义表情符号并迭代它们。
  3. 每次代码找到自定义表情符号时，它都会将其插入到HTML DOM（文档对象模型）中。

代码如下所示

function displayCustomEmojis(emoji){
   const newSpan = document.createElement("span");
   newSpan.innerHTML = emoji;

   // set id to custom so that later we can use it to determine
   // if it is an item which can be added to the recently used list.
   newSpan.id = "custom";

   // the call to prepend() allows me to use normal forward iteration
   // thru the array but shows the most recently added emoji
   // (highest index) first.

   document.querySelector("#v-pills-custom").appendChild(newSpan);

   newSpan.addEventListener("click", emojiClickHandler);

}
  1. 我们只添加一个新的span（每个表情符号都存储在一个span中）。
  2. 然后我将表情符号字符添加到innerHTML（显示给用户的文本）。
  3. 我为每个span添加了一个名为custom的特殊id（我稍后会用它来知道用户何时点击了这些项目之一）。
  4. 最后，我将新span appendChild()到父元素（v-pills-custom代表原始父div）。

写入LocalStorage很容易

当您将新的表情符号放入文本框并点击保存按钮时，以下代码作为saveCustomEmojiHandler()函数的一部分运行。我在这里不显示整个函数，因为其中大部分是错误处理和消息显示代码。这是函数中有趣的核心部分。🍔 or 🥓🥓🥓🥓

   let allUserAddedEmojis = Array.from(document.querySelector("#customEmojiText").value);
   document.querySelector("#customEmojiText").value = "";

   let atLeastOneFailure = false;

   for (let i = 0; i < allUserAddedEmojis.length;i++){

      let emoji = allUserAddedEmojis[i];

      if (isEmojiNew(emoji,customEmojis)){

      // if it's new, push it onto the list and write to localstorage
      customEmojis.push(emoji);
      localStorage.setItem("customEmojis", JSON.stringify(customEmojis));
      displayCustomEmojis(emoji);
}

仔细看第一行，因为它很有趣。它使用Array.from()方法确保用户粘贴的自定义表情符号从Unicode字符转换而来。如果您不以这种方式转换字符串，那么您的localStorage数据中将出现各种奇怪的现象。

看看LocalStorage中存储了什么

很酷，对吧？表情符号只是字符，所以它们直接存储在localStorage中，作为我稍后用于填充此自定义选项卡的字符数组。

结论

我希望您喜欢这个，也希望您对HTML开发为什么很酷以及它如何帮助创建您可以快速

  1. 创建的应用程序学到了一点
  2. 轻松部署

未来

稍后，我将把它转换为一个ElectronJS^应用程序，这将允许该应用程序直接从您的桌面在任何平台（Win10、Linux、MacOS）上运行。

历史

  • 2020年1月25日：初次发布
© . All rights reserved.