editor.md使用以及图片复制粘贴
2021/11/10 23:09:56
本文主要是介绍editor.md使用以及图片复制粘贴,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
editor.md使用以及图片复制粘贴
- editor.md使用教程
- 1.1 下载官方资源
- 1.2 查看实例代码
- 1.3 打开example中full.html查看全部功能配置
- 1.4 开启图片上传并且实现拖拽剪切复制粘贴上传图片
- 1.4.1 编写uploadImg.js
- 1.4.2 使用方法
- 参考文章
editor.md使用教程
1.1 下载官方资源
官网地址
1.2 查看实例代码
初始化加载js文件和css样式文件
<link rel="stylesheet" href="editormd/css/editormd.css" /> <div id="test-editor"> <textarea style="display:none;"> </textarea> </div> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="editormd/editormd.min.js"></script> <script type="text/javascript"> $(function() { <!-- test-editor 即是需要初始化富文本编辑器对应的div id --> var editor = editormd("test-editor", { //path -资源库lib的路径 path : "editormd/lib/" }); }); </script>
这样就可以生成基本的markdown编辑器了
1.3 打开example中full.html查看全部功能配置
<script type="text/javascript"> var testEditor; $(function() { $.get('test.md', function(md){ testEditor = editormd("test-editormd", { width: "90%", height: 740, //资源库lib的路径 path : '../lib/', theme : "dark", previewTheme : "dark", editorTheme : "pastel-on-dark", markdown : md, codeFold : true, //syncScrolling : false, saveHTMLToTextarea : true, // 保存 HTML 到 Textarea searchReplace : true, //watch : false, // 关闭实时预览 htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启 //toolbar : false, //关闭工具栏 //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启 emoji : true, taskList : true, tocm : true, // Using [TOCM] tex : true, // 开启科学公式TeX语言支持,默认关闭 flowChart : true, // 开启流程图支持,默认关闭 sequenceDiagram : true, // 开启时序/序列图支持,默认关闭, //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 : "./php/upload.php", onl oad : function() { console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.setMarkdown("#PHP"); //this.width("100%"); //this.height(480); //this.resize("100%", 640); } }); }); $("#goto-line-btn").bind("click", function(){ testEditor.gotoLine(90); }); $("#show-btn").bind('click', function(){ testEditor.show(); }); $("#hide-btn").bind('click', function(){ testEditor.hide(); }); $("#get-md-btn").bind('click', function(){ alert(testEditor.getMarkdown()); }); $("#get-html-btn").bind('click', function() { alert(testEditor.getHTML()); }); $("#watch-btn").bind('click', function() { testEditor.watch(); }); $("#unwatch-btn").bind('click', function() { testEditor.unwatch(); }); $("#preview-btn").bind('click', function() { testEditor.previewing(); }); $("#fullscreen-btn").bind('click', function() { testEditor.fullscreen(); }); $("#show-toolbar-btn").bind('click', function() { testEditor.showToolbar(); }); $("#close-toolbar-btn").bind('click', function() { testEditor.hideToolbar(); }); $("#toc-menu-btn").click(function(){ testEditor.config({ tocDropdown : true, tocTitle : "目录 Table of Contents", }); }); $("#toc-default-btn").click(function() { testEditor.config("tocDropdown", false); }); }); </script>
1.4 开启图片上传并且实现拖拽剪切复制粘贴上传图片
1.4.1 编写uploadImg.js
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('image', file, fileName); $.ajax({ //配置图片上传的接口路径 url: Editor.settings.imageUploadURL, type: 'post', data: formData, processData: false, contentType: false, dataType: 'json', success: function (msg) { var code=msg['code']; if(code==200){ var url=msg["data"]; if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){ Editor.insertValue("![图片alt]("+url+" ''图片title'')"); }else{ Editor.insertValue("[下载附件]("+url+")"); } }else{ console.log(msg); alert("上传失败"); } }, error: function () { console.log('请求失败'); } }); }
1.4.2 使用方法
- 对应页面引入uploadImg.js
<!--uploadImg.js--> <script type="text/javascript" th:src="@{/js/uploadImg.js}"></script>
- 开启图片上传配置,onload事件里面初始化插件
//初始化Markdown编辑器 var contentEditor; $(function() { contentEditor = editormd("md-content", { width : "100%", height : 640, syncScrolling : "single", path : "/lib/editormd/lib/", imageUpload : true,//必须 imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "http://localhost:8080/upload",//图片上传后端接口 onl oad : function() { //支持复制,粘贴,拖拽上传文件。 initPasteDragImg(this);//必须 } }); });
- 数据返回格式
参考文章
文章一
文章二
这篇关于editor.md使用以及图片复制粘贴的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-30Dnd-Kit学习:新手快速入门指南
- 2024-09-30ESLint学习:初学者指南
- 2024-09-30Formik学习:从入门到实践指南
- 2024-09-30Hooks 规则学习:从入门到上手的简单教程
- 2024-09-30Husky学习:初学者必备指南
- 2024-09-30Immer不可变数据用法入门教程
- 2024-09-30JWT 用户校验学习:简易教程与实战演练
- 2024-09-30MobX用法入门教程:轻松掌握MobX基础
- 2024-09-30Nest学习:入门到实践的简易教程
- 2024-09-30Nest学习:新手入门指南