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