EmojioneAreaでプリザンターの入力項目に絵文字パレットを表示させてみる

Last updated at 2023-03-28Posted at 2022-07-08

概要

jQueryのプラグイン「EmojioneArea」を使ってプリザンターの入力項目に絵文字パレットを表示させてみます。

試したバージョン

プリザンター 1.3.13.0（DB: SQL Server）
EmojioneArea v3.4.2

EmojioneAreaを設定してみる

（2023/03/28）設定方法②を追記しました。①では設定に３手必要ですが、②では設定が１手で済みます。

設定方法①：外部ライブラリのCSS／JSファイルを直接設定する

下記ページより「emojionearea.min.css」ファイルをコピーして、プリザンターのテーブル管理画面から「スタイル」に貼り付けます。
- emojionearea/emojionearea.min.css at master · mervick/emojionearea

下記ページより「emojionearea.min.js」ファイルをコピーして、プリザンターのテーブル管理画面から「スクリプト」に貼り付けます。
- emojionearea/emojionearea.min.js at master · mervick/emojionearea

※distフォルダに.minがあるものとないものがありますが、どちらを選んでも構いません。特に理由がなければ.minを選んでください。（サイズが小さい分、読み込みが早くなるため）
- emojionearea/dist at master · mervick/emojionearea

続いて、絵文字パレットを表示させるためのスクリプトを設定します。

記録テーブルのサンプルスクリプト

$p.events.on_editor_load = function () {
    // 分類Aに絵文字パレットを表示させる
    $("#Results_ClassA").emojioneArea();
    // 説明Aに絵文字パレットを表示させる
    $("#Results_DescriptionA").emojioneArea();
};

気持ちをこめて貼り付ける

設定方法②：外部ライブラリをCDNから読み込む

以下のように外部ライブラリをCDNから読み込む方法でも適用が可能です。

記録テーブルのサンプルスクリプト

$p.events.on_editor_load = function () {
    // 外部ライブラリの読み込み（emojionearea）
    var css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.css');
    document.body.appendChild(css);
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.js', function() {
        // 分類Aに絵文字パレットを表示させる
        $("#Results_ClassA").emojioneArea();
        // 説明Aに絵文字パレットを表示させる
        $("#Results_DescriptionA").emojioneArea();
    })
};