markdown 编辑器插件其实很多,反复造轮子除了能够自嗨一下也的确没啥意义,但我其实想要一个能够间接上传图片到七牛云的 markdown 编辑器,感觉对我就有点意义了,所以诞生了这么个货色
特点
只须要通过简略设置一个七牛云外链域名和一个获取上传 token 的办法就能够间接上传图片到七牛云的能力。(我没有提供编辑器都该有的操作按键,所以伤处啊那图片间接通过拖动图片到编辑区域来实现)
体验地址
成果
npm
Use With React
npm install react-qn-md --save
属性 props
name | required | type | default | description |
---|---|---|---|---|
initInfo | false | string | ” | 初始的 md 语法字符串 |
theme | false | string | light | 色彩主题 ‘light’ ,’dark’ 可选 |
imgStyle | false | string | — | 七牛云图片款式规定 |
domain | false | string | — | 七牛云空间的外链域名 |
customStyle | false | object | — | 自定义编辑框的款式 |
edit | false | bool | true | 是否显示编辑框,false 时用于展现 |
token | false | string | ” | 七牛云上传 token |
getToken | false | function | — | 实现获取七牛云上传 token |
updateInfo | false | function | param -> mdInfo | 返回最新 markdown 内容 |
如果须要上传图片性能 则 domain token getToken 是必须的
import React, {useState} from 'react';
import './App.css';
import Editor from 'react-qn-md'
function App() {const [token, setToken] = useState('')
const getToken = () => {
fetch('http://www.huili.cool:8901/api/uptoken', {method: 'GET'}).then((res) => {if (res.status === 200) {res.text().then((token) => {setToken(token)
})
}
})
}
const updateInfo = (info) => {
// do something with new info
// save or submit ...
console.log(info)
}
return (
<div className="App">
<Editor
initInfo="## Hello World!"
domain="http://editor.huili.cool/"
token={token}
getToken={getToken}
updateInfo={updateInfo}
theme="light"
customStyle={{height: '40vh', overflow: 'auto'}} >
</Editor>
</div>
);
}
export default App;
github 地址
Use With Vue
npm install vue-qn-md-editor --save
属性 options
name | required | type | default | description |
---|---|---|---|---|
theme | false | string | light | 色彩主题 ‘light’ ,’dark’ 可选 |
domain | true | string | — | 七牛云空间的外链域名 |
customStyle | false | string | — | 自定义编辑框的款式 |
edit | false | bool | true | 是否显示编辑框,false 时用于展现 |
v-model
能够在组件上应用 v-model 来绑定编辑的内容
事件 event
name | param | description |
---|---|---|
getUploadToken | — | 必须实现此办法,用户须要在此办法中实现获取七牛云的上传 token, 且通过 this.$refs[element].setToken(token) 来传递上传凭证,且保障上传凭证的无效工夫大于 2 分钟 |
Use
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<MdEditor
ref="editor"
v-model="mdInfo"
domain="http://xxxx.cn/"
@getUploadToken="getUploadToken"
theme="dark"
customStyle="height: 100vh;text-align: left;"
/>
</div>
</template>
<script>
import MdEditor from 'vue-qn-md-editor'
export default {
name: 'App',
components: {MdEditor},
data () {
return {mdInfo: ''}
},
methods: {getUploadToken () {
// 实现获取七牛云上传 token
// fetch('/api/token').then((token) => {todo...})
const token = 'YOXpF0XvM_3yVDsz5C-hWwrFE5rtDAUQC3XjBQEG:A'
this.$refs.editor.setToken(token)
}
}
}
</script>
github 地址