اسکریپت emojiarea.js یک پلاگین jQuery است برای انتخاب شکلک های مختلف و اضافه کردن شکلک به ویرایشگر با یک کلیک! این پلاگین سبک که به راحتی می توان از آن استفاده کرد به کاربران امکان می دهد سریع شکلک های مورد نظرشان را (به صورت background, unicode یا تصویر) به textarea اضافه کنند.

روش نصب

$ npm install jquery.emojiarea.js --save

روش استفاده

1.چون این پلاگین بر پایه jQuery نوشته شده است اول باید آن را به صفحه اضافه کنید و سپس فایل پلاگین emojiarea را زیر آن اضافه می کنیم.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="jquery.emojiarea.js"></script>

2.تگ textarea را داخل یک تگ دیگر به عنوان نگهدارنده ببرید و نگهدارنده باید دارای خصیصه های data زیر باشد:

• data-emojiarea : حتما باید باشد.
• data-type="unicode" : مقدار این خصیصه علاوه بر unicode می تواند یا image باشد یا css . برای دیدن تفاوت های این سه می توانید به صفحه پیش نمایش سر بزنید.
• data-global-picker="false" : مقدار این خصیصه هم یا false است یا true.

بعد از افزودن کدهای بالا نتیجه به این شکل خواهد بود:

<div data-emojiarea
data-type="image"
data-global-picker="false"
>
<i class="emoji emoji-smile emoji-button">&#x1f604;</i>
<textarea>&#x1f604;</textarea>
</div>

3.همچنین کدهای css مورد نیاز آن را باید به صفحه اضافه کنید:

.emoji {
color: transparent;
display: inline-block;
font-size: 18px;
font-style: normal;
height: 25px;
width: 25px;
}

.emoji::selection {
background-color: highlight;
color: transparent;
}

.emoji-image {
font-size: 14px;
line-height: 28px;
}

.emoji-button {
cursor: pointer;
margin: 5px;
}

.emoji-editor {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
cursor: text;
font: medium -moz-fixed;
font: -webkit-small-control;
-webkit-font-smoothing: antialiased;
height: 100px;
overflow: auto;
padding: 5px;
resize: both;
width: 100%;
}

.emoji-picker {
background-color: #fff;
border: 1px solid #ccc;
position: absolute;
width: 210px;
}

.emoji-picker a {
cursor: pointer;
display: inline-block;
font-size: 20px;
padding: 3px;
}

.emoji-selector {
border-bottom: 1px solid #ccc;
display: flex;
}

.emoji-selector li { margin: 5px; }

.emoji-group {
display: <a href="http://www.jqueryscript.net/tags.php?/grid/">grid</a>;
grid-template-columns: repeat(6, 16.66667%);
height: 200px;
overflow-y: scroll;
padding: 3px;
}

4.و در نهایت باید مسیر تصاویر شکلک ها را مشخص کنید.

EmojiArea.DEFAULTS.assetPath = './assets/images';

امیدوارم این این پلاگین استفاده کنید و لذت ببرید.

منبع