关于javascript:reactvue-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 (    <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地址