markdown(editor.md)编辑器-图片上传
来源:互联网 发布:淘宝店哪家大衣好看 编辑:程序博客网 时间:2024/05/20 20:22
点击下载案例代码
editor.md网站地址http://pandao.github.io/editor.md/
首先需要引入对应的css跟js文件,jquery一定要在前面引入,大家可以去官网下载editor.md,也可以点击我上面的案例代码下载图片上传分为 同域上传 跟 跨域上传,1,同域上传简单理解就是编辑器页面跟图片上传的请求后台是同一域名内。2,跨域上传则相反,比如你编辑器页面请求是aaa.com/add,而图片上传的请求路径是 bbb.com/img/upload,(aaa.com跟bbb.com分别是两个域名)
后台代码我就不写了,大家可以去看我写的文件上传案例
图片同域上传:
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8" /> <title>同域图片上传示例Demo</title> <!--引入样式文件--> <link rel="stylesheet" href="editor.md-master/examples/css/style.css" /> <link rel="stylesheet" href="editor.md-master/css/editormd.css" /> <!--引入js文件--> <script src="editor.md-master/examples/js/jquery.min.js"></script> <script src="editor.md-master/editormd.js"></script> </head> <body> <header> <h1>图片上传示例</h1> <p>Image upload example</p> </header> <!--编辑器开始--> <div id="test-editormd"> <textarea style="display:none;">初始化数据</textarea> </div> <!--编辑器结束--> <!--js开始--> <script type="text/javascript"> $(function() { var testEditor = editormd("test-editormd", { width: "90%",//设置宽度 height: 640,//设置高度 markdown : "", path : 'editor.md-master/lib/',//设置lib目录 //dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为 true //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为 true //dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为 true //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为 0.1 //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为 #fff imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/file/upload.do?test=dfdf",//上传的请求,需要返回如下格式: /* 上传的后台只需要返回一个 JSON 数据,结构如下: { success : 0 | 1, // 0 表示上传失败,1 表示上传成功 message : "提示的信息,上传成功或上传失败及错误信息等。", url : "图片地址" // 上传成功时才返回 } */ }); }); </script> <!--js结束--> </body></html>
图片跨域上传:
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8" /> <title>图片跨域上传示例Demo</title> <!--引入样式文件--> <link rel="stylesheet" href="editor.md-master/examples/css/style.css" /> <link rel="stylesheet" href="editor.md-master/css/editormd.css" /> <!--引入js文件--> <script src="editor.md-master/examples/js/jquery.min.js"></script> <script src="editor.md-master/editormd.js"></script> </head> <body> <header> <h1>图片跨域上传示例</h1> <p>Image cross-domain upload example.</p> </header> <!--编辑器开始--> <div id="test-editormd"> <textarea style="display:none;">初始化数据</textarea> </div> <!--编辑器结束--> <script type="text/javascript"> $(function() { var testEditor = editormd("test-editormd", { width : "90%",//设置宽度 height : 640,//设置高度 markdown : "", path : 'editor.md-master/lib/',//指定lib目录 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "http://www.aaa.com/upload?name=aa",//上传请求的地址 crossDomainUpload : true, uploadCallbackURL : "http://localhost/add"//上传成功后跳转的地址 /* 跨域时,上传的图片服务器后台只需要返回一个跳转 URL 并跳转到原页面同域下的 callback 页面,结构如下: { success : 0 | 1, // 0 表示上传失败,1 表示上传成功 message : "提示的信息,上传成功或上传失败及错误信息等。", dialog_id : $_GET['dialog_id'], url : "远程图片地址" //上传成功时才返回,就是图片的访问地址 } */ }); }); </script> </body></html>
阅读全文
0 0
- markdown(editor.md)编辑器-图片上传
- editor.md 本地上传图片
- editor.md国产markdown编辑器使用实例
- Markdown编辑器editor.md的使用
- Kind Editor 编辑器 图片上传
- Markdown编辑器之Editor.md v1.5.0应用
- 利用Editor.md构建Markdown富文本编辑器
- JavaWEB之Markdown 编辑器Editor.md集成使用教程
- editor.md国产markdown编辑器踩过的坑
- 结合腾讯云对象存储服务解决CSDN markdown编辑器导入md文件时图片上传困难的问题
- Markdown编辑器使用说明.md
- 快速入门 Editor.MD---在Web项目里使用 Markdown 编辑器
- Editor.md和markdown实现Sg一样的截图粘贴上传
- markdown转HTML(使用editor.md)
- 使用百度editor 富文本编辑器上传图片
- Wiz.Editor.md 为知笔记 Markdown 插件
- 欢迎使用CSDN-markdown编辑器.md
- 去掉CSDN-markdown编辑器的上传图片里面的水印
- Eclipse导入项目时出现感叹号"!"该如何解决
- Access denied for user 'root'@'localhost' (using password:YES)
- Kotlin使用
- FPGA利用待分频时钟实现任意分频
- 机器学习-->python常用知识点
- markdown(editor.md)编辑器-图片上传
- postgresql查看数据库占用的物理存储空间大小
- Android 自定义感光器控件SolarProgressView,也可当做普通ProgressBar使用
- Salesforce JSON解析
- Android FlexboxLayout
- 欢迎使用CSDN-markdown编辑器
- Codeforces Round #191 (Div. 2) C. Magic Five(数学,逆元取膜模板)
- Java的一些知识点对比参照?
- 一个动态数组越界bug