2023年11月24日
Jerry
1399
2023年11月24日
django-mdeditor实现了后端的富文本输入,但发现图片仅能上传实现,不如复制粘贴来的方便。为了让用户能够方便地插入和编辑图像,百度找到了如下的方法来实现复制粘贴图片的功能。这样,用户可以直接在编辑器中粘贴图片,图片将被上传到服务器并显示在编辑器中,为编辑内容增添丰富的视觉元素。特地记录一下。 解决方法如下:
1、找到文件\site-packages\mdeditor\templates\markdown.html
文件
2、找到<script type="text/javascript">
这行
3、这行及以下所有内容删除,也就是把js这块代码全删除了,把js替换
<script type="text/javascript">
$(function () {
editormd("{{ id }}-wmd-wrapper", {
watch: {{ config.watch|lower }}, // 关闭实时预览
lineNumbers: {{ config.lineNumbers|lower }},
lineWrapping: {{ config.lineWrapping|lower }},
width: "{{ config.width }}",
height: {{ config.height }},
placeholder: '{{ config.placeholder }}',
// 当有多个mdeditor时,全屏后,其他mdeditor仍然显示,解决此问题。
onfullscreen : function() {
this.editor.css("border-radius", 0).css("z-index", 9999);
},
onfullscreenExit : function() {
this.editor.css({
zIndex : 10,
border : "1px solid rgb(221,221,221)"
})
},
syncScrolling: "single",
path: "{% static 'mdeditor/js/lib' %}" + "/",
// theme
theme : "{{ config.theme|safe }}",
previewTheme : "{{ config.preview_theme|safe }}",
editorTheme : "{{ config.editor_theme }}",
saveHTMLToTextarea: true, // editor.md 有问题没有测试成功
toolbarAutoFixed: {{ config.toolbar_autofixed|lower }},
searchReplace: {{ config.search_replace|lower }},
emoji: {{ config.emoji|lower }},
tex: {{ config.tex|lower }},
taskList: {{ config.task_list|lower }},
flowChart: {{ config.flow_chart|lower }},
sequenceDiagram: {{ config.sequence|lower }},
// image upload
imageUpload: true,
imageFormats: {{ config.upload_image_formats|safe }},
imageUploadURL: "{{ config.upload_image_url }}",
toolbarIcons: function () {
return {{ config.toolbar|safe }}
},
onload: function () {
initPasteDragImg(this); //必须
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
function initPasteDragImg(Editor){
var doc = document.getElementById(Editor.id)
doc.addEventListener('paste', function (event) {
var items = (event.clipboardData || window.clipboardData).items;
var file = null;
if (items && items.length) {
// 搜索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
} else {
console.log("当前浏览器不支持");
return;
}
if (!file) {
console.log("粘贴内容非图片");
return;
}
uploadImg(file,Editor);
});
var dashboard = document.getElementById(Editor.id)
dashboard.addEventListener("dragover", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("dragenter", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("drop", function (e) {
e.preventDefault()
e.stopPropagation()
var files = this.files || e.dataTransfer.files;
uploadImg(files[0],Editor);
})
}
function uploadImg(file,Editor){
var formData = new FormData();
var fileName=new Date().getTime()+"."+file.name.split(".").pop();
formData.append('editormd-image-file', file, fileName);
formData.append('content', '');
$.ajax({
url: Editor.settings.imageUploadURL,
type: 'post',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (msg) {
var success=msg['success'];
if(success==1){
var url=msg["url"];
if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
}else{
Editor.insertValue("[下载附件]("+msg["url"]+")");
}
}else{
console.log(msg);
alert("上传失败");
}
}
});
}
</script>
如果是docker部署,那可以在Dockerfile里面实现文件的复制,直接替换掉markdown.html
COPY markdown.html /usr/local/lib/python3.8/site-packages/mdeditor/templates/markdown.html
原创文章,转载请注明出处:
https://jerrycoding.com/article/editor-copy-upload
《学习笔记》
0
微信
支付宝