當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

React 所见即所得编辑器 Vditor

發(fā)布時(shí)間：2024/3/7 编程问答 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 React 所见即所得编辑器 Vditor 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

在網(wǎng)頁(yè)上嵌入一個(gè) Typora 編輯器是不是很酷的一件事？

Markdown是程序員寫(xiě)文檔最喜歡的語(yǔ)法，但是直接寫(xiě)Markdown并不夠直觀，所以出現(xiàn)了「所見(jiàn)即所得」的Markdown編輯器，Typora就是拔尖的產(chǎn)品。

我的博客寫(xiě)作過(guò)程是先在 Typora上寫(xiě)好，然后復(fù)制Markdown到博客編輯上進(jìn)行保存發(fā)布。開(kāi)始使用Markdown編輯器是 for-editor,我之前寫(xiě)過(guò)for-editor富文本組件的使用方法 React富文本——markdown編輯器

但是這個(gè)過(guò)程太麻煩了，如果有一個(gè)富文本組件能夠?qū)崿F(xiàn) Markdown所擊即所得的編輯文章，那就完美了。

經(jīng)過(guò)在 GitHub 上搜索，發(fā)現(xiàn)了類似的富文本組件 Vditor

成品圖

安裝依賴

NPM

npm install vditor --save

UMD

初始化編輯器

import React, { useEffect, useRef } from 'react'; import Vditor from 'vditor'; import "vditor/dist/index.css"; import './index.less';interface MarkdownEditorProps {value: string;onChange: (value: string) => void; }export default function MarkdownEditor(props: MarkdownEditorProps) {const { value, onChange } = props;const editorRef = useRef<HTMLDivElement>(null);useEffect(() => {const vditor = new Vditor(editorRef.current,{value,input: (value) => onChange(value),cache: { id: 'vditor' },height: '100%',counter: { enable: true }})}, [])return (<div className="markdown-editor" ref={editorRef}></div>) }

【vditor示例圖】

對(duì)比之前我使用的純Markdown編輯器for-editor,如果想使用for-editor編輯器，可以參考：React富文本——markdown編輯器

【for-editor示例圖】

vditor詳細(xì)配置

Vditor官網(wǎng)地址

附件上傳功能

配置config

一、默認(rèn)流程

采用vditor默認(rèn)上傳流程，upload必填參數(shù)
- url 填寫(xiě)處理上傳服務(wù)器地址
- fieldName 是服務(wù)器接受附件參數(shù)的字段
- extraData 除了附件參數(shù)外額外的參數(shù)
- format 方法講服務(wù)器返回值格式化成vditor接受的數(shù)據(jù)格式（JSON格式）
  
  { code: 0, data: { errFiles: ‘’, succMap: { [name]: url } } }

二、自定義上傳

通過(guò) handler 方法處理上傳過(guò)程，接受 File 參數(shù)，返回vditor接受的數(shù)據(jù)格式

{ code: 0, data: { errFiles: ‘’, succMap: { [name]: url } } }

三、服務(wù)器處理

【koa】

ajax圖片上傳功能實(shí)現(xiàn)（點(diǎn)擊，拖拽，粘貼）Koa服務(wù)端

【Nest】

import {Post,UseInterceptors,UploadedFile, } from '@nestjs/common';@Post('upload')@UseInterceptors(FileInterceptor('file'))async smmsCommon(@UploadedFile() file, @Body() body) {const { packet } = body;const random = uuidv4().replace(/-/g, '');const prefix = file.originalname.split('.').pop().toLowerCase();const targeName = `${random}.${prefix}`;...return {code:0,data:'http://localhost:3000/image.png'} }

總結(jié)

以上是生活随笔為你收集整理的React 所见即所得编辑器 Vditor的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。