时间: 2023-11-06 【学无止境】 阅读量:共330人围观
简介 网络上有很多类型的markdown文本编辑器,但大多数太“重”了,使用不到这么多功能!本文介绍一种轻量级的mditor。
github地址
https://github.com/Houfeng/mditor
进入这个目录下载这几个文件
高级设置
直接下载的文件没有图片选择上传
需要找到以下位置,进行修改
添加下面的代码
name: 'image', title: '图片', key: 'shift+alt+p', /*istanbul ignore next*/handler: function handler() { // 创建 input 节点 let fileInputEle = document.createElement("input"); let that = this // 将 input 类型改为文件 type = file fileInputEle.setAttribute("type", "file"); // 不显示 fileInputEle.style.display = "none"; console.log(fileInputEle) fileInputEle.click(); // 内容改变事件 fileInputEle.addEventListener("change", () => { console.log(fileInputEle) if (fileInputEle.files && fileInputEle.files.length) { console.log(111) let formData = new FormData() //获取用户选择的图片 formData.append('file', fileInputEle.files[0]); // 携带数据请求后台 $.ajax({ url: '图片上传地址', type: 'POST', data: formData, // 传入实例化的formData对象,此对象包含了要上传的文件 contentType: false, // 在请求服务器的时候,数据有非字符串格式的内容(文件是二进制) processData: false, // formData对象不需要转换成参数字符串 cache: false, success: function (data) { console.log(data); if (data.success) { that.editor.wrapSelectText('![alt](' + data.data.src , ')'); } else { this.editor.wrapSelectText('![alt](', ')'); } } }); } }); // this.editor.wrapSelectText('![alt](', ')'); }