关于javascript:reactvue-markdown-编辑器组件

54次阅读

共计 2202 个字符，预计需要花费 6 分钟才能阅读完成。

markdown 编辑器插件其实很多，反复造轮子除了能够自嗨一下也的确没啥意义，但我其实想要一个能够间接上传图片到七牛云的 markdown 编辑器，感觉对我就有点意义了，所以诞生了这么个货色

只须要通过简略设置一个七牛云外链域名和一个获取上传 token 的办法就能够间接上传图片到七牛云的能力。(我没有提供编辑器都该有的操作按键，所以伤处啊那图片间接通过拖动图片到编辑区域来实现)

体验地址

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 地址

正文完