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

react-vuemarkdown编辑器组件

时间:2023-03-31 14:56:17 vue.js

markdown编辑器插件其实有很多。重新发明轮子除了自娱自乐真的没什么意义,其实我想要一个可以直接上传图片到七牛云的markdown编辑器。对我来说感觉有点意思,所以就诞生了要实现这样一个东西的特性,只需要简单的设置一个七牛云外链域名和一个获取上传令牌的方法就可以直接上传图片到七牛云.(我没有提供所有编辑器应该有的操作按钮,所以伤口直接拖拽图片到编辑区完成)--七牛云图片样式规则domainfalsestring---七牛云空间外链域名customStylefalseobject---自定义编辑框样式editfalsebooltrue是否显示编辑框,false用于显示tokenfalsestring''七牛云上传tokengetTokenfalsefunction---实现获取七牛云上传tokenupdateInfofalsefunctionparam->mdInfo返回最新的markdown内容如果需要上传图片,domaintokengetToken是必须的importReact,{useState}from'react';import'./App.css';importEditorfrom'react-qn-md'functionApp(){const[token,setToken]=useState('')constgetToken=()=>{fetch('http://www.huili.cool:8901/api/uptoken',{method:'GET'}).then((res)=>{如果(res.status===200){res.text().then((token)=>{setToken(token)})}})}constupdateInfo=(info)=>{//使用新信息做一些事情//保存或提交...console.log(info)}return(

);}exportdefaultApp;github地址UseWithVuenpminstallvue-qn-md-editor--saveattributeoptionsnamerequiredtypedefaultdescriptionthemefalsestringlightcolortheme'light','dark'optionaldomaintruestring---七牛云空间外链域名customStylefalsestring---自定义编辑框样式editfalsebooltrue是否显示编辑框,为false时用于显示v-model。可以在组件上使用v-model绑定编辑内容事件eventnameparamdescriptiongetUploadToken---必须实现该方法。用户需要在该方法中获取七牛云的上传token,通过这个.$refs[element].setToken(token)来传递上传证书,保证上传证书有效时间大于2分钟使用github地址