react/vue markdown editor component

In fact, there are many markdown editor plug-ins. It really doesn't make sense to build wheels repeatedly, but I actually want a markdown editor that can directly upload pictures to qiniu cloud. It feels a little meaningful to me, so such a thing was born

characteristic

You can directly upload pictures to qiniu cloud by simply setting an external chain domain name of qiniu cloud and a method to obtain the upload token. (I didn't provide the operation keys that all editors should have, so the injury ah, the picture is directly completed by dragging the picture to the editing area)

Experience address

effect

npm

Use With React

npm install react-qn-md --save

Attribute props

name required type default description
initInfo false string '' Initial md syntax string
theme false string light Color theme 'light', 'dark' optional
imgStyle false string --- Seven cattle cloud picture style rules
domain false string --- External chain domain name of qiniu cloud space
customStyle false object --- Customize the style of the edit box
edit false bool true Whether to display the edit box. If false, it is used for display
token false string '' Seven cattle cloud upload token
getToken false function --- Get the seven cattle cloud upload token
updateInfo false function param -> mdInfo Return the latest markdown content

If the function of uploading pictures is required, domain token getToken is required

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 address

Use With Vue

npm install vue-qn-md-editor --save

Property options

name required type default description
theme false string light Color theme 'light', 'dark' optional
domain true string --- External chain domain name of qiniu cloud space
customStyle false string --- Customize the style of the edit box
edit false bool true Whether to display the edit box. If false, it is used for display

v-model

You can use v-model on the component to bind the edited content

event

name param description
getUploadToken --- This method must be implemented. Users need to obtain the upload token of qiniu cloud through this$ refs[element]. Settoken (token) to transfer the upload voucher, and ensure that the validity time of the upload voucher is greater than 2 minutes

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 () {
      // Get the seven cattle cloud upload token
      // fetch('/api/token').then((token) => {todo...})
      const token = 'YOXpF0XvM_3yVDsz5C-hWwrFE5rtDAUQC3XjBQEG:A'
      this.$refs.editor.setToken(token)
    }
  }
}
</script>

github address

Tags: Javascript Front-end npm React Vue.js

Posted by fiorelina21 on Sat, 21 May 2022 13:47:31 +0300