Markdownエディター導入の際の画像の取り扱いについて

Question

PHPでブログみたいのを作っていて、このteratailみたいなmarkdownを導入したいです。
特に画像の所が難しいです。
markdown自体の導入は、サンプルコードでできるのですが、
画像の挿入は、このteratailみたいな選択だけでアップロードはできません。
画像を先に入れて、画像のパスを入れて表示できる感じです。おまけに画像のサイズも調整がうまくできません。。
このteratailみたいな画像の添付の仕方はどうやったらできるのでしょうか。。。
文字の途中に何枚も画像を添付できるようにしてみたいです。
markdownの一つは以下を参考しましたが、画像がもっと自由に扱えるのであれば他でもと思っております。
http://unitopi.com/markdown-editor/

イメージとしては下記のように使えるようにしたいです。

Comments

[yambejp]

手書きでいいので希望する具体的なUIを図示できませんか？

[tete2]

質問にイメージしている画像を添付してみました。

Answer 1

画像の取り扱いについて / 画像の添付の仕方はどうやったら

回答は「大まかな方針」になります。

1. codemirror/lib/codemirror.js を追いかけて、アイコンクリック時のイベントリスナを探す。
2. 画像アイコンのクリックイベントに割り込ませるなどして、ファイル選択によるプレビュー機能/画像サイズ変更機能は、FileAPI/Canvasでの加工/Ajax+FormDataでのアップロードを自前で用意する

ご質問の内容は「エディタの個々の詳細な機能」に相当するので、個別のライブラリとしては、誰も公開していないと思いますので、コードを読んでみるのが早い（あるいは、読むしかない）と思います。

---

以下、コードリーディングに関する内容です。

PHPでブログみたいのを作っていて、このteratailみたいなmarkdownを導入したい

には共感するところがありました（Markdown 入力の オレオレWiki を作ろうとしています）。

SimpleMDE は私も採用予定でして、調べている最中です（以下の特徴は掴んでいます）。

1. 拡張性の高いコード用のエディタCodeMirrror を拡張したもの。
2. 正規表現だけで高速変換する marked.jsを採用してリアルタイムプレビュー機能を実現。

方言の拡張をしたかったので、プレビュー機能は無効化し、JsonMLベースで処理する Markdown-js を利用する方針。

---

エディタ実装の詳細を知るため、gitHubから zipダウンロードし、読んでいるのが、以下の内容になります。

/sparksuite-simplemde-markdown-editor/
  dist/ ... minify された *.css, *.js
  src/ ... commented source

/codemirror-5.51.0/
  lib/ ... エディタのコアスクリプト
  mode/ ... 開発言語毎の詳細設定スクリプト

冒頭に示しましたが、codemirror/lib/codemirror.js を読むことで、詳細な変化を加えられると思います。

Comments

[tete2]

なるほど。。少し難しいですが、参考になりました！
おおまかな仕組みの理解が出来てきたので、引き続き調べたいと思います。
ありがとうございます！

Answer 2

画像をアップロードするなら、受け取り側がファイルで持つのか
DBに保持するのかによって処理がかわってきます。

Comments

[tete2]

DBには画像のパスだけ保存する感じで、サーバーの画像フォルダーの中に画像を入れようと思っておりました。

[yambejp]

> サーバーの画像フォルダーの中に画像を入れよう

すでにあるファイル名と競合させない方法を検討ください
（たとえば元のファイル名をつかわず、タイムスタンプでファイル名をつくるとか）

[yambejp]

ちなみにプレビューはサーバーにアップロードしなくても
クライアントサイドのみで見せることはできます
（プレビューをアップロードするならプレビューの意味ないですから）

[tete2]

はい、そうですね。
タイムスタンプでファイル名で良いと思います。

[tete2]

そうですね、プレビューはサーバーアップロードなしでできると素晴らしいところです。。

[yambejp]

とりあえずこう

<?PHP
print_r($_FILES);
?>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#up').addEventListener('change',e=>{
var target=e.target;
var file=target.files[0];
if(file !==undefined){
var fr = new FileReader();
fr.addEventListener('load',e=>{
var type=file.type;
if(["image/jpeg","image/gif","image/png"].indexOf(type)>-1){
var blob=new Blob([e.target.result],{type});
var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
var src="data:"+file.type+";base64,"+btoa(binary);
var style="max-width:100px;max-height:100px";
var img=Object.assign(document.createElement('img'),{src,style});
Object.assign(document.querySelector('#preview'),{textContent:""}).appendChild(img);
}else{
target.value="";
document.querySelector('#preview').textContent="";
}
});
fr.readAsArrayBuffer(file);
}
});
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="file" name="up" id="up"><span id="preview"></span>
<input type="submit" value="send">
</form>

[tete2]

なるほど、、javascriptはあまりわからないのですが、ファイルのアップロードとデータの確認はできました。