ちょっと前にこんな記事をうｐしました。
コラボフローでもマークダウンを使えるようにカスタマイズしてみました🥰
マークダウンで入力された申請書を閲覧するときに
良い感じな見た目で表示してくれるように変更するカスタマイズです。
そして、この記事を書いているときに感じました。
入力中にマークダウンのプレビューがした～～～い！！！
↑現在だとこんな感じです。↑
めちゃ分かりづらいワケではないのですが、
「どんな感じかな？」を確かめるたびに[申請内容確認]ボタンを
クリックして確認するのは地味にめんどくさい気がします。。
なので、申請入力時にもマークダウンを直に感じられるよう
カスタマイズをおこなっていきましょう🗿
カスタマイズする前に
申請書の設定内容などは前回の記事から続きで書いてますので、
まだ読んでいない方は↓を読んでから試してみてくださいね！
マークダウンエディタ「EasyMDE」を使いますよぉ
SimpleMDEの後継であるEasyMDEを利用してカスタムします。
(function () {
"use strict";
collaboflow.events.on("request.input.show", (event) => {
const partsName = "fidMarkdown";
new EasyMDE({element: document.getElementById(partsName)});
});
})();
書くのはコレだけです。
マークダウンを書きたいテキストエリアパーツに対して、newします。
あとは、EasyMDEのJS/CSSライブラリを読み込ませて保存すれば完了です！
動作確認
たった数行のコードとライブラリの読み込みで、
とても分かりやすいエディタを表示することができました！
プレビュー表示もできるので、
何度も画面遷移をせずとも内容を確認することができます🐰
ただ、長文を書く時に今までのテキストエリアパーツは
必要に応じて入力範囲の拡大/縮小ができたのですが、
それができなくなってしまいました💦
用途に応じてカスタムするかどうかを
使い分けたほうがもっと便利かもしれません🤔
あとがき
kito👹氏にQuill.jsを教えていただきましたが
textareaでは使えなかったので、今回はEasyMDEを利用しました！
（div要素に全く新しいエディタを組み込むことができるみたいです）
↑のライブラリも自由度が高くて面白そうなので、
別のカスタマイズで利用したいですね🐈
ではまた！
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion