agusmakmun / agusmakmun/django-markdown-editor

Copy/Paste clipboard images

オープン
#240 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
JavaScript
スター
901
フォーク
1.3k
PR マージ指標
30日以内にマージされた PR はありません

説明

Having a hook for the paste event would be really helpful in order to upload images directly from clipboard. I created a view in my project and added the below function for the paste event

```javascript
function uploadClipboardImage(event, martorUploadUrl) {
if (event.clipboardData.files.length >= 1) {
let targetField = event.target.parentElement;
if (targetField.id.startsWith('martor-')
&& targetField.classList.contains('martor-field')
&& targetField.classList.contains('ace_editor')
) {
let aceEditor = ace.edit(targetField.id);
for (const f of event.clipboardData.files) {
const formData = new FormData();
formData.append('martor-image-upload', f);
fetch(martorUploadUrl, {
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token }}',
},
body: formData
}).then(response => {
if (response.ok) {
response.json().then(
data => aceEditor.insert(`\n${data.link}\n`)
)
} else {
console.log(response.status)
}
})
}
}
}
}
```

data-upload-url attribute can also be used for getting the url from the event's target element. Official implementation would be highly appreciated.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Use the supplied uploadClipboardImage function as the behavior reference and inspect where the editor handles paste events. Check how the martor upload URL and CSRF token are exposed, then verify that pasted clipboard images are uploaded and their links are inserted into the Ace editor without disrupting normal paste behavior.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
django, javascript
領域
frontend
issue の種類
機能追加
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。