MAIL
スクリプトで実装
今回の実装にあたり、簡単にですが要件を以下のように定めました。
①プレビュー画面はコメント欄直下に配置する
②コメント欄に入力が行われるたびにプレビュー画面へ反映される
③画像を添付したとき、画像のプレビューが表示される（動画は考慮しない）
これらの要件を満たすために作成したスクリプトが以下になります。
出力先は「編集」としました。
$p.events.on_editor_load = function () {
// ①プレビュー画面をHTML内に追加
function AddPreviewArea(){
$('#CommentField').after(`
<p class="PreviewTitle">プレビューエリア</p>
<div id="PreviewArea">
<div id="ImagePreview"></div>
</div>
`);
}
// ①AddPreviewAreaを呼び出してPreviewAreaを追加
AddPreviewArea();
// ②③コメントのプレビューを表示する関数
function showPreview() {
const commentText = document.getElementById('Comments').value;
const previewArea = document.getElementById('PreviewArea');
// 改行を <br> タグに変換し、画像が二重に追加されないようにする
let formattedText = commentText
.replace(/!\[image]\((.*?)\)/g, '<img src="$1" alt="Image preview" style="max-width: 100%; height: auto;">')
.replace(/\n/g, '<br>');
// プレビューエリアを更新しつつ、ImagePreviewの内容を保持する
previewArea.innerHTML = formattedText;
}
// ③画像のプレビューを表示する関数
function showImagePreview(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const imagePreview = document.getElementById('ImagePreview');
if (imagePreview) {
// 既存の画像を保持しないように、プレビューエリア全体を更新する
const commentText = document.getElementById('Comments').value;
const formattedText = commentText
.replace(/!\[image]\((.*?)\)/g, '<img src="$1" alt="Image preview" style="max-width: 100%; height: auto;">')
.replace(/\n/g, '<br>');
// プレビューエリアに画像とテキストを追加
document.getElementById('PreviewArea').innerHTML = `
<div id="ImagePreview">
<img src="${e.target.result}" alt="Image preview" style="max-width: 100%; height: auto;">
</div>
<div>${formattedText}</div>
`;
} else {
console.error('ImagePreview element not found.');
}
};
reader.readAsDataURL(file);
}
}
// ②コメントフィールドに入力があるたびにプレビューを更新
document.getElementById('Comments').addEventListener('input', showPreview);
// ③ファイル選択が行われたときにプレビューを更新
document.getElementById('Comments.upload-image-file').addEventListener('change', showImagePreview);
// ③テキストフィールドに「！image」形式が貼り付けられた場合も対応
document.getElementById('Comments').addEventListener('paste', function() {
// 少し遅延させて貼り付けた内容を反映
setTimeout(showPreview, 100);
});
}要件ごとに作成したスクリプトの内容を、簡単にですが解説いたします。
①HTML内にUIを設置しています。
更新後などに要素が⼊れ替わることでUIが消えてしまうため、on_editor_load内に記述する必要がありました。
②コメント欄（textarea）に入力があるたびにinputイベントが発火し、showPreview関数が呼び出されます。
showPreview関数では、textareaから現在のテキストと画像を取得し、PreviewAreaに表示させています。
③FileReaderオブジェクトを使って、選択された画像ファイルを読み込み、Data URLとして取得します。
読み込んだ画像を
また、画像の添付はファイル選択によるケースと、テキストフィールドに「！image」形式で直接貼り付けるケースを考慮する必要がありました。
では実際に、このスクリプトを実装した画面をご覧ください。
プレビューエリアのスタイルは以下の設定にしております。
タイトル部分の背景色を青、プレビュー部分の背景色はオレンジに指定してあります。
#PreviewArea {
width: 300px;
background-color: #e7c38c;
overflow: hidden;
}
.PreviewTitle {
width: 300px;
background-color: #000099;
color: #FFFFFF;
}■ コメント未入力の状態がこちら。
■ テキストを入力してみます。
■ 画像をファイル選択で添付してみます。
この部分で改善の余地がありますが、この状態ではまだプレビューに反映されません。
■ エンターキーで改行を行うことでプレビューに画像が表示されます。
■ コメントを保存してみます。
無事、プレビューの内容どおりにコメントが反映されました。
まとめ
いかがでしたか？
簡単な機能ではありますが、無事作成することができました。
このように、要件を定めて挑戦すればユーザー好みのカスタマイズも不可能ではないと実感いたします。
弊社ではプリザンターをご使用中、または、これからご使用になられる方向けに、運用ノウハウ集、プリザンター逆引き辞典、スタイル・スクリプトサンプル集、サーバスクリプト大全の販売を行っております。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆
コメント記載前にプレビューで確認したい
こんにちは、シーイーシーカスタマサービスの新村です。
プログラミング&プリザンター勉強中の自分が挑戦していることをご紹介していきたいと思います。
コメント欄に画像を追加するときに、誤った画像を追加してしまった経験などはないでしょうか。
内容項目や説明項目に画像を添付したときは、登録前にプレビューで確認できますが、コメント欄ではそれができないため意図しない画像を添付してしまう恐れがあります。
そこで今回この問題を解決するために、コメント記載中にプレビューで確認できる機能を作成してみました。