新しいテキストユニットの開発で考慮した点

この記事は a-blog cms Advent Calendar 2017の5日目の記事です。

Ver.2.8 からテキストユニットが新しくなります。下の画像のように、リンクや強調などのタグに実際にCSSが当たった状態で表示されるようになります。


今回はかなり思い切った変更なのでもし今まで通りのテキストユニットを使用したい方は

<script>
ACMS.Ready(function(){
  ACMS.Config.LiteEditorFeature = false;
});
</script>

にしていただくことでこの新しいテキストユニットの機能をOFFにできます。

このテキストユニットの開発は見た目以上に色々なことを考慮する必要がありましたので、今回はその苦労話を紹介したいと思います。
最初はただ、文字にリンクのスタイルや強調のスタイルを当てるだけで終わりと安直に考えていました。しかし、これまでのa-blog cmsと互換性をもたせるために様々なことを考慮することがありました。まず初めに、新しい入力モードである「WYSIWYG入力モード」と従来の入力モードである「ソース入力モード」とを用意しました。ソース入力モードが今まで通りテキストエリアにHTMLタグなどを入力していくモードで、WYSIWYG入力モードがWYSIWYGのように入力したタグにスタイルが当たった状態で見えるモードになります。実際にテキストとして保存されるのはソース入力モードの内容です。


また以下5つの場合の対策をして以前のテキストユニットと互換性を保ちました。本当に大変でした。。。

  1. 改行された時の対策
  2. スペース入力時の対策
  3. CKEditorが選択された時の対策
  4. 自由入力やソースが選択された時の対策
  5. マークダウンが選択された時の対策
  6. ソース入力モードでタグが挿入された場合の対策

改行された時の対策

こういったWYSIWYIG形式のエディターだと通常、contenteditable属性が使われていることが多いので、ChromeやSafariではdiv, br , IEではpタグが改行時に自動的に挿入されてしまいます。つまりブラウザによって違うソースコードが生成される可能性があり、それが意図しない文章間の空白を作ってしまう原因になってしまいます。 そこで、このテキストエディタでは改行された時のイベントをhookし、ブラウザに関わらず brタグ、もしくは改行コード(\n)どちらかを挿入できるように選べるようにしました。a-blog cmsの場合、今までのテキストユニットとの互換性を考慮して改行コード(\n)を採用しています。


WYSIWYG入力モード


ソース入力モード

スペース時の入力

またスペースの入力量に応じて「スペース、nbsp、スペース、nbsp」と順番にテキストエリアに反映されるようにしました。これによって、WYSIWYGと同じスペース量が実際の表示結果に反映されます。


WYSIWYG入力モード


ソース入力モード

CKEditorが選択された時の対策

また新しい、テキストユニットでも当然前のように、CKEditorが選択できないといけないわけですが、テキストユニットはLite EditorというJavaScriptライブラリとして別に開発していたので、Lite Editor上にさらにCKEditorを表示するという実装をしなければいけませんでした。


  opt.onSelect = (self) => {
    ACMS.Dispatch.emoditor($('.entryFormTextarea', item));
    $('.lite-editor', item).hide();
  };

そこで上記のように、CKEditorが選択された時は、ACMS.Dispatch.emoditor();でCKEditorを呼び出して、lite-editorのテキスト入力領域は隠すようにしました。これで今まで通りCKEditorがテキストユニット上で使えます。

自由入力やソースが選択された時の対策

また自由入力やソースが選択されている時に、入力エリアがcontenteditableになっていると意図しないコードが改行やスペースの処理によって挿入されてしまうことがあるので、ソース入力モードにして、WYSIWYG入力モードを選択できないようにしました。つまり自由入力やソースの場合は、contenteditableではなく今まで通り通常のテキストエリアにテキストを入力していく形になります。


マークダウンが選択された時の対策

またマークダウンが選択された時は、「強調1」や「リンク挿入」などのボタンが押された時にHTMLタグが挿入される代わりに、マークダウン記法が押されたボタンに応じて挿入されるようにLite Editor側を調整しました。またこの時もソースや自由入力の時と同じようにcontenteditableではなくテキストエリアに入力して行く形にしています。


ソース入力モードでタグが挿入された場合の対策

また直接入力モードでタグが挿入された場合は今まで通り、HTMLタグがテキストエリアに挿入されるようにしました。


カスタマイズ

また、ACMS.Configを調整することで例えばボタンを以下のように増やすこともできるのでみなさんチャレンジしてみてください。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions.push({
        label: 'アンダーライン',
        tag: 'u',
        className: '',
        sampleText: 'アンダーライン'
    });
});

またこのJavaScriptはインライン専用のWYSIWYGエディタとしてMITライセンスで配布してるのでCMSに限らず様々な用途でお使いいただけます。よろしければお使いください。


以上です。みなさん新しくなったテキストユニットで気持ちよく記事を書いてみてくださいね!!


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →