How to add emoji picker to text field and text area

[Martin Briglia]

Hi! Is it possible to add an emoji picker to a form text field and a non WYSIWYG text area field?

Thanks!

[MarkRS]

JCE does things like that for a text area field, it does it with plugins.

A text field I'm not so sure, but I'd imagine it'd be the same, if it's possible at all.

[GhiaMar]

I read that TinyMCE can do that but I guessed that there would be a Joomla way of getting this done.

https://www.tiny.cloud/blog/emoji-picker/

[MarkRS]

They both run in Joomla...

[GhiaMar]

Got it!

EmojitextareaField.php

<?php
/**
* @package japppush
* @copyright Copyright (c) 2022 Martin Briglia / MGS Creativa
* @license GNU General Public License version 3, or later
*/

namespace MGSCreativa\Component\Japppush\Administrator\Field;

\defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Form\Field\TextareaField;

/**
* EmojitextareaField field.
*
* @since 1.0.0
*/
class EmojitextareaField extends TextareaField
{
/**
* The form field type.
*
* @var string
* @since 1.0.0
*/
protected $type = 'EmojitextareaField';

/**
* Method to get the textarea field input markup.
* Use the rows and columns attributes to specify the dimensions of the area.
*
* @return string The field input markup.
*
* @since 1.0.0
*/
protected function getInput()
{
$doc = Factory::getApplication()->getDocument();
$wa = $doc->getWebAssetManager();

$wa->registerScript('tinymce', 'media/vendor/tinymce/tinymce.min.js', [], ['defer' => true]);
$wa->useScript('tinymce');

return parent::getInput();
}

/**
* Method to get the data to be passed to the layout for rendering.
*
* @return array
*
* @since 1.0.0
*/
protected function getLayoutData()
{
$data = parent::getLayoutData();

// Initialize some field attributes.
$id = !empty($this->id) ? $this->id . '_emoji' : '';

$extraData = array(
'id' => $id,
);

return array_merge($data, $extraData);
}
}

Call it ike this

<field
name="body"
type="emojitextarea"
label="COM_JAPPPUSH_FIELD_MESSAGE_BODY_LABEL"
maxlength="160"
charcounter="true"
/>

Then in the js media of the component (or somewhere else)

const jformBody_emoji = document.getElementById('jform_body_emoji');
if (jformBody_emoji) {
tinymce.init({
selector: "#jform_body_emoji",
plugins: "emoticons",
toolbar: "emoticons",
toolbar_location: "bottom",
menubar: false
});
}

[MarkRS]

Well done!