公開！KuroEditorの目的と機能と仕組み vol.2

開発方針について

ともかく、KuroCMS用なのだから汎用性は極力持たせるが、本質は忘れない様にしないといけません。WYSIWYGは絶対でバニラJSで組み込みのみ。フレームワークは一切使わずに超早く動くもの。疎結合でヘッドレスEditorには拘らない。呼び出し側が @layer 指定しなければ、呼び出し側のボタンレイアウトに従う程度には統一感は出せる。KuroCMSでは出さないけどw。

CSSは、tailwind ＋ KuroEditor 内部用だけ。テーブルは Dropbox paper風の挙動。とりあえず、そこまで緻密に仕上げなくても大きく操作性劣っていなければ、こまかい調整は後の課題にして完成を優先させる。ともかく完成しなければ始まらない。そこそこ使えれば公開を行う。

細かい仕様について

ブログで細かい仕様を説明しても仕方がないので画像で見せて行こうと思う。

このように、KuroEditorは Topメニューにプレビュー表示、html 表示の2種類があるが、まずもってhtmlは使わないと思われる。どうしても KuroEditor に無い機能を html で書きたい人向けや html で内部の挙動を確認したい場合などに利用する。

次は絵文字、テーブル作成、メディア、コード、水平線、自動保存、保存、目次が並ぶ。基本メディアは Drop&Drop で画像などのメディアファイルをカーソルの場所に自由に貼れるので、基本的にはこのボタンは使わない。

基本の文字装飾

そして文字及びカーソル行に関する装飾は文字を１文字でも範囲選択すると表示される。あまり常時表示のメニューを表示したくない方針から、こうなっています。またマウスの移動距離を短くしたかったこともあります。

左から、強調文字、イタリック、下線、うち消し線。次の h1 h2 などは、見出し設定です。次は、引用バー、注意ブロック、と並びます。次が文字カラー、文字の大きさ、行間の幅、そして文字の並び（左寄り、中央、右寄り、均等）、箇条書き、数字付き箇条書きとなります。（ちなみに tab キーで tab 入力すると自動的に段落になります。）※verup でフォントの種類も選べるようになってます。

テーブルは一番の重点ポイントです

またテーブルは KuroEditor 一番のポイントです。セル行や列の挿入は Dropbox Paper と同じような挿入する罫線の近くにマウスカーソルがあると罫線の横に＋ボタンが表示されるので、そこ押せば挿入。削除は行の右や列の下に、赤いーがあるので、それで削除。超簡単に表を操作できます。セルの結合や分割もボタン1つです。罫線の太さも選べます。罫線近くにマウスを移動しこんどは、右や下に罫線ボタンが出るので、それを押すとメニューが表示されきめ細かく太さを変更できます。色も変えられます。

メディアの配置も自由自在

メディアの貼り付けも自由自在。呼び出し側が画像を保存している場合だけでなく、youtube のリンクを使った、楽曲ランキングや、気になる動画リストなども簡単に作れます。URL を貼りたい時でキーボードから入力したいときは、［［ url ］］と入力することで、すぐさま自動展開される。

目次の使い方

小説や契約書みたいな段落管理も、h1 h2 など使って、topメニューの目次を使うとこの通り、長文でも自分がどこまで入力しているのか、一目で分かります。

組み込み方法についての概要

そして最後に組み込みは超簡単です。editor を挿入したい場所に１行を挿入し、保存などの呼び出され関数を準備しておくだけです。htmlで渡されます。ちなみに、KuroCMSではこの受け取った html を記事データとして保管・管理をすることになります。詳しくは下記のリンクからご参照ください。結合点が非常に少ないので、どのようなツールに対しても簡単に組み込む事が可能です。

終わりに

日本人は本当にテーブル表記が大好きです（日本の家もそうですが囲う事が好きなんですねw）。しかし海外製のエディッターでは殆ど実装されていません。あっても、使い勝手が悪く、見た目も変更できないものばかり。特にセル連結とか、なぜないのか不思議でしかたありません。さておき、このKuroEditor が一部の人だったとしても、お役に立てれば幸いです。

1. github コード公開先：https://github.com/Kuro-Boo/KuroEditor
2. KuroEditor紹介ページ：https://kuro.boo/kuroeditor/
3. KuroEditorテストページ：https://kuro.boo/kuroeditor/sample/