agusmakmun / agusmakmun/django-markdown-editor
Copy/Paste clipboard images
- 主要言語
- 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