1、安装
yarn add vditor
2、代码
import 'vditor/dist/index.css' ;
import React, { useEffect } from 'react' ;
import Vditor from 'vditor' ;
import './index.less' ;
const App = ( { setVditorValue, vditorValue } : any) => {
const [ vd, setVd] = React. useState< Vditor> ( ) ;
useEffect ( ( ) => {
const vditor = new Vditor ( 'vditor' , {
toolbar : [
'emoji' ,
'headings' ,
'bold' ,
'italic' ,
'strike' ,
'link' ,
'|' ,
'list' ,
'ordered-list' ,
'check' ,
'outdent' ,
'indent' ,
'|' ,
'quote' ,
'line' ,
'code' ,
'inline-code' ,
'insert-before' ,
'insert-after' ,
'|' ,
'upload' ,
'table' ,
'|' ,
'undo' ,
'redo' ,
'|' ,
'fullscreen' ,
'edit-mode' ,
{
name : 'more' ,
toolbar : [
'both' ,
'code-theme' ,
'content-theme' ,
'export' ,
'outline' ,
'preview' ,
'devtools' ,
'info' ,
'help' ,
] ,
} ,
] ,
minHeight : 450 ,
after : ( ) => {
vditor. setValue ( vditorValue) ;
console. log ( vditorValue, '初始值' ) ;
setVd ( vditor) ;
} ,
upload : {
url : '' ,
token : getCookie ( 'token' ) || '' ,
setHeaders ( ) {
return {
token : getCookie ( 'token' ) || '' ,
} ;
} ,
accept : 'image/jpeg,image/png,image/gif,image/jpg,image/bmp' ,
success ( editor, msg ) {
vditor?. focus ( ) ;
console. log ( '上传成功了' , editor, msg, JSON . parse ( msg) ) ;
const { rows, flag } = JSON . parse ( msg) ;
if ( flag && flag. retCode === '0' ) {
showSuccess ( '图片上传成功' ) ;
const { fileName, shareUrl } = rows[ 0 ] ;
vditor?. insertValue ( ` ![ ${ fileName} ]( ${ shareUrl} ) ` ) ;
}
} ,
error ( msg ) {
showError ( '图片上传失败' ) ;
} ,
} ,
input : ( value ) => {
setVditorValue ( vditor. getValue ( ) ) ;
} ,
mode : 'sv' ,
} ) ;
} , [ ] ) ;
return (
< div>
< div id= "vditor" className= "vditor" / >
< / div>
) ;
} ;
export default App;
3、使用效果