react/vue markdown 编辑器组件

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 (
    

      
      
    
  );
}

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

github地址