方向性：済-１：サイズ変更はスライダーで5%おき、２：位置（フロート）、３：トリミング回転編集、４：画像入れ替え、５：キャプション
//data-targetを#付きに変更する?
let $area = $btn.closest('#ninja-editbar').getAttribute('data-target');
$btn.setAttribute('data-area','#' + $area);
-> 配列比較一致＝クラス配列と追加予定配列を比較して一致するものを削除、選択したクラスを追加！
この文章はダミーです。
レイアウトを確認するための文章ですので意味はありません。
この投稿はテストです。
もしこの投稿が残ったとしたら、テストは成功したということで今頃美味しいビールでも飲んでいることでしょう。
この文章はダミーです。
冬は早朝(つとめて)。
雪の降りたるは、言ふべきにもあらず。
霜のいと白きも、またさらでも、いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。
昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりて、わろし。
テストP・・・・・！
テストPbr・・・・・！
テスト・・・・・！
テスト・・・・・！
//実行！
$('.edione').nja_wysiwig();
//操作用のボタンは、画像、button, select等のフォームパーツを使う。
選択範囲がクリックで解除されてしまう。
//.html()で、ソース表示はテキストエリアに！
//document.execCommand は廃止予定？
書式クリアは、document.execCommandが安定するので採用
//document.execCommand('removeFormat');
//テキスト選択、装飾ボタンクリック後にツールバーが復活しない。
pack_url: '/css/img/twemoji.svg',
json_url: '/css/emojis.json',
/js/emojipanel.js(通常版）
/js/emojipanel-formt.js(MT用/JSON3に書き換えのため！)
//changeプロパティに関数をかく
change: function(){
console.log('test!');
},
ToDO
【重要！！！】document.execCommand()既に廃止されてるけどまだ使えている -> Clipboard_APIへの移行（ブラウザ未対応が恐ろしい！！）
【重要！！！】document.execCommand()と Clipboard_API両方に対応できそう。
【参考】選択後にHTMLを挿入
開発メモ：contenteditable
-> Pure JavaScriptで作られたwygwigがいい感じなのでソースを拝借したい！
-> 画像のドラッグ(前半はjqueryで後半はvanillasで)
参考リンク：vanilla.jsによるDOMリサイズ
参考リンク：画像リサイズのヒント
参考リンク：画像リサイズのヒント2
参考リンク：firefoxでドラッグ
本家リンク：interact.js
解説リンク：interact.js
本家リンク：movement-js
javascriptライブラリ: -> emojiライブラリBEST
１）ODBCドライバーのCharactor setの調整
//修正
/lib/MT/ObjectDriver/Driver/DBD/mysql.pm
my %Charset = (
'utf-8' => 'utf8',
//これを追加
'utf-8' => 'utf8mb4',
'shift_jis' => 'sjis',
'shift-jis' => 'sjis',
'euc-jp' => 'ujis',
#'iso-8859-1' => 'latin1'
);
２）MySQLの該当カラムのCollation調整
phpMyadminでDBにログインして、
データ保存するテーブルのカラムの「照合順序」を「utf8_general_ci」から「utf8mb4_general_ci」に変更。
１）my_entryをクリック
２) 構造をクリック
３）変更するテーブルをチェックして、一番下の変更をクリック
４）照合順を変えてから、保存
以上で保存できるようになった！
課題）インストール時に照合順序を変更できないか？
課題）自作プラグインでデータベースアップデートや照合順序を変更できないか？
採用絵文字パネル -> EmojiPanel
kiteでポップアップ時に表示 -> 選択時イベントは設定できるので、そこで、カーソル位置に挿入 -> 閉じて位置を戻す
挿入は「数値文字参照を利用して表示」することで可能にした。
【課題】カテゴリの日本語表示
【課題】パネル表示が遅い。-> jsonやSVGをjavascriptに組み込んどく？emoji-buttonは表示は高速なので参考して改造するか？
-> ソースコードをみたら、pack_urlがデフォルトでNullになっていたので読み込みを辞めたら早くなった
-> カラーではない絵文字がいくつかある。->これは最初から存在してた問題 ->jsonの書き換えで正常化できる？
【課題】挿入後のキャレット位置-> 解決
//カーソルを範囲の終わりに設定
range.collapse(false);
//選択範囲をなくす
window.getSelection().removeAllRanges();
//選択範囲をカーソル位置にする
window.getSelection().addRange(range);
汎用性が高そう: -> emoji-button
emoji-button：スクリプトの提供がインストールのみ：設置がめんどくさい、eventがチープ。picker起動時のevent設定がない。
絵文字画像置き換え -> Twitter絵文字ライブラリ
更新頻度の高いこれを使ってみる: -> fg-emoji-picker
失敗！ソースを確認したら、contenteditableに対応してない！
参考: -> js-emoji
React(javascriptライブラリ) -> emoji-mart
参考: -> html css javascript emoji
留意事項