您当前的位置: 首页 >  学无止境 >  文章详情

博客系统使用轻量级markdown文本编辑器

时间: 2023-11-06 【学无止境】 阅读量:共330人围观

简介 网络上有很多类型的markdown文本编辑器,但大多数太“重”了,使用不到这么多功能!本文介绍一种轻量级的mditor。

github地址
https://github.com/Houfeng/mditor

进入这个目录下载这几个文件

alt

高级设置

直接下载的文件没有图片选择上传

需要找到以下位置,进行修改

alt

添加下面的代码

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](', ')'); }
文章评论
总共 0 条评论
这篇文章还没有收到评论,赶紧来抢沙发吧~
Copyright (C) 2023-现在 若熙站点 保留所有权利 蜀ICP备 17034318号-4  公安备案号 50010302505321