markdown 編輯器插件其實很多，重復(fù)造輪子除了可以自嗨一下也確實沒啥意義，但我其實想要一個可以直接上傳圖片到七牛云的markdown編輯器，感覺對我就有點意義了，所以誕生了這么個東西

特點

只需要通過簡單設(shè)置一個七牛云外鏈域名和一個獲取上傳token的方法就可以直接上傳圖片到七牛云的能力。(我沒有提供編輯器都該有的操作按鍵，所以傷處啊那圖片直接通過拖動圖片到編輯區(qū)域來完成)

體驗地址

效果

image.png

image.png

npm

Use With React

npm install react-qn-md --save

屬性 props

如果需要上傳圖片功能 則 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

v-model

可以在組件上使用 v-model 來綁定編輯的內(nèi)容

事件 event

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 () {
      // 實現(xiàn)獲取七牛云上傳token
      // fetch('/api/token').then((token) => {todo...})
      const token = 'YOXpF0XvM_3yVDsz5C-hWwrFE5rtDAUQC3XjBQEG:A'
      this.$refs.editor.setToken(token)
    }
  }
}
</script>

github地址