当前位置: 首页 > Web前端 > vue.js

来康康vue3环境下的markdown编辑器md-editor-v3吧,支持tsx,暗黑模式哦~

时间:2023-03-31 23:50:49 vue.js

undefined代码仓库:md-editor-v3功能列表快速插入内容工具栏、编辑器浏览器全屏、页面全屏等;内置白色主题和深色主题,支持绑定切换;支持快捷键插入内容;支持使用prettier格式自定义内容(使用CDN引入,只支持格式化的md内容,可在代码中设置关闭);支持多种语言,支持自扩展语言;支持复制粘贴上传的图片;...更多功能稍后会更新,如果有你想要的功能没有开发,请留言~预览默认模式:darkmode:apis注意在jsx下,需要使用modelValue配合onChange方法来实现完成数据绑定。vue模板语法下,可以直接使用v-modal命令~propsnametypedefaultvaluedescriptionmodelValueString''md编辑内容,vue模板支持双向绑定(v-model="value")editorClassString''编辑器最外层stylehljsObjectnull项目使用高亮,直接传实例即可,生产环境不会请求CDN,需要手动导入支持的高亮代码样式highlightJsStringhighlight.jshighlightJsCDNhighlightCssStringatom-one-dark预览高亮代码样式historyLengthNumber10最大记录操作数(太大会占内存)pageFullScreenBooleanfalse浏览器全屏previewBool??eantrue预览模式htmlPreviewBool??eanfalsehtml预览languageString'zh-CN'内置中英文('zh-CN','en-US'),可扩展其他语言自己,可以覆盖内置的中英文languageUserDefinedArray[{key:StaticTextDefaultValue}]扩展语言h这里,只要修改language值扩展key即可,类型声明可以手动导入toolbarsArray[all]选择性显示工具栏,可选内容如下ditorNameString'editor'当多个编辑器放在同一个页面时,最好提供这个属性来区分一些ID为[toolbars]['bold','underline','italic','strikeThrough','title','sub','sup','quote','unorderedList','orderedList','codeRow','code','link','image','table','revoke','next','保存','pageFullscreen','全屏','预览','htmlPreview','github'];自定义语言,需要替换的内容如下(部分字段不主动提供,页面可能不美观):[StaticTextDefaultValue]exportinterfaceStaticTextDefaultValue{toolbarTips?:ToolbarTips;titleItem?:{h1?:字符串;h2?:字符串;h3?:字符串;h4?:字符串;h5?:字符串;h6?:字符串;};linkModalTips?:{标题?:字符串;可描述?:字符串;descLablePlaceHolder?:字符串;urlLable?:字符串;UrlLablePlaceHolder?:字符串;按钮确定?:字符串;按钮上传?:字符串;:Stringcontentchange事件(目前绑定textare的oninput事件,每输入一个词都会触发)onSavev:String保存事件,快捷键和保存按钮都会触发onUploadImgfiles:FileList,callback:Function上传图片事件,pop-upwindow会等待上传结果,一定要上传以下url作为回调,用于输入参数和返回快捷键。快捷键主要是用对应功能的英文单词首字母CTRL,冲突项加SHIFT,再用ALT替换冲突关键功能说明开发标记CTRL+Ssave触发编辑器的onSave回调√CTRL+Bbold**bold**√CTRL+Uunderlineunderline√CTRL+Iitalic*italic*√CTRL+1-61-6级标题#标题√CTRL+↑上标上标√CTRL+↓下标下标√CTRL+Qquote>引用√CTRL+O有序列表1.有序列表√CTRL+LLink[Link](https://imbf.cc)√CTRL+TForm`\Form\`放弃开发(不可实现)xCTRL+Zwithdrawtrigger撤回编辑器中的内容,与系统√CTRL+SHIFT+S删除线~删除线~√CTRL+SHIFT+U无序列表-无序列表√CTRL+SHIFT+C块级代码多行代码块√CTRL+SHIFT+I图片链接![图片](https://imbf.cc)√CTRL+SHIFT+Z前进触发编辑器中内容向前移动,与系统无关√CTRL+SHIFT+F美化内容√CTRL+ALT+C内联代码内联代码块√演示yarnaddmd-editor-v3jsx语法projectimport{defineComponent,reactive}from'vue';importEditorfrom'md-editor-v3';import'md-editor-v3/库/样式。css';从'highlight.js'导入hljs;导入'highlight.js/styles/atom-one-dark.css';导出默认defineComponent({setup(){constmd=reactive({text:'默认markdown内容'});return()=>();}});vue模板项目默认可以选择多张图片上传,支持上传粘贴板上的图片注意:上传到粘贴板时,如果是网页上的gif图片,是无法正确上传gif格式的!asynconUploadImg(files:FileList,callback:(urls:string[])=>void){constres=awaitPromise.all(Array.from(files).map((file)=>{returnnewPromise((rev,rej)=>{constform=newFormData();form.append('file',file);axios.post('/api/img/upload',form,{headers:{'Content-Type':'multipart/form-data'}}).then((res)=>rev(res)).catch((error)=>rej(error));});}));callback(res.map((item:any)=>item.data.url));}End项目只存活了3周。使用中有bug,希望大家给我留言。我期待了解您想要的功能。