react simplemde editor
v5.2.0
EASYMDE（最新鮮的簡單叉）的React組件包裝器。
只有兩個依賴項（peer）和easymde（peer）。
由 @rip21？ 建造
easymde ， codemirror或cursor信息，以便能夠操縱它。用宣傳-Toc生成的目錄
>=16.8.2easymde現在是同伴依賴性，請手動安裝label道具已被刪除options ，以防止在每個渲染上創建新實例，以及與該錯誤有關的其他實例（詳細介紹以下）ref ，因此您可以使用ref Prop輕鬆訪問div包裝器。@babel/runtime助手不再被嵌入，而是進口。 npm install --save react-simplemde-editor easymde
注意：可能您可能需要安裝@babel/runtime ，不用它，但是如果您沒有任何問題，那麼您不應該。
主持演示
或在本地看到它：
git clone https://github.com/RIP21/react-simplemde-editor.git
cd react-simplemde-editor
yarn install
yarn demo
open browser at localhost:3000
查看演示代碼以獲取更多示例。
下面的所有示例都在打字稿中
不受控制的用法
import React from "react" ;
import SimpleMDE from "react-simplemde-editor" ;
import "easymde/dist/easymde.min.css" ;
< SimpleMDE /> ; export const ControlledUsage = ( ) => {
const [ value , setValue ] = useState ( "Initial value" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
return < SimpleMdeReact value = { value } onChange = { onChange } /> ;
} ;您可以設置您作為options道具傳遞的SimpleMDE選項的API。如果您正在使用Typescript，則會由編譯器推斷。
注意：如果您沒有指定自定義ID，它將自動為您生成ID。
請注意，您需要使用useMemo來記憶options ，以免它們在每個rerender上更改！它會影響行為和表現，因為隨後在父母的每一個渲染中，呈現SimpleMdeReact ，您將獲得編輯器的新實例，您絕對想避免使用！另外，如果您更改每個value更改的options ，您將失去焦點。因此，將options作為組件之外的const放置，或者如果在功能/掛鉤組件或基於class的組件的props的情況下，請確保將options部分或完全設置為useMemo 。這裡有更多的內容：＃164
export const UsingOptions = ( ) => {
const [ value , setValue ] = useState ( "Initial" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
const autofocusNoSpellcheckerOptions = useMemo ( ( ) => {
return {
autofocus : true ,
spellChecker : false ,
} as SimpleMDE . Options ;
} , [ ] ) ;
return (
< SimpleMdeReact
options = { autofocusNoSpellcheckerOptions }
value = { value }
onChange = { onChange }
/>
) ;
} ;您可以使用extraKeys Prop包含密鑰地圖。在codemirror額外鍵上閱讀更多
export const UpdateableByHotKeys = ( ) => {
const extraKeys = useMemo < KeyMap > ( ( ) => {
return {
Up : function ( cm ) {
cm . replaceSelection ( " surprise. " ) ;
} ,
Down : function ( cm ) {
cm . replaceSelection ( " surprise again! " ) ;
} ,
} ;
} , [ ] ) ;
const [ value , setValue ] = useState ( "initial" ) ;
const onChange = ( value : string ) => setValue ( value ) ;
return (
< SimpleMdeReact value = { value } onChange = { onChange } extraKeys = { extraKeys } />
) ;
} ; import ReactDOMServer from "react-dom/server" ;
export const CustomPreview = ( ) => {
const customRendererOptions = useMemo ( ( ) => {
return {
previewRender ( ) {
return ReactDOMServer . renderToString (
< ReactMarkdown
source = { text }
renderers = { {
CodeBlock : CodeRenderer ,
Code : CodeRenderer ,
} }
/>
) ;
} ,
} as SimpleMDE . Options ;
} , [ ] ) ;
return (
< div >
< h4 > Custom preview </ h4 >
< SimpleMdeReact options = { customRendererOptions } />
</ div >
) ;
} ;在此處查看活動的完整列表
import { SimpleMdeReact } from "react-simplemde-editor" ;
import type { SimpleMdeToCodemirrorEvents } from "react-simplemde-editor" ;
export const CustomEventListeners = ( ) => {
const [ value , setValue ] = useState ( "Initial value" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
// Make sure to always `useMemo` all the `options` and `events` props to ensure best performance!
const events = useMemo ( ( ) => {
return {
focus : ( ) => console . log ( value ) ,
} as SimpleMdeToCodemirrorEvents ;
} , [ ] ) ;
return < SimpleMdeReact events = { events } value = { value } onChange = { onChange } /> ;
} ; export const Autosaving = ( ) => {
const delay = 1000 ;
const autosavedValue = localStorage . getItem ( `smde_demo` ) || "Initial value" ;
const anOptions = useMemo ( ( ) => {
return {
autosave : {
enabled : true ,
uniqueId : "demo" ,
delay ,
} ,
} ;
} , [ delay ] ) ;
return (
< SimpleMdeReact id = "demo" value = { autosavedValue } options = { anOptions } />
) ;
} ;easymde ， codemirror或cursor信息，以便能夠操縱它。 export const GetDifferentInstances = ( ) => {
// simple mde
const [ simpleMdeInstance , setMdeInstance ] = useState < SimpleMDE | null > ( null ) ;
const getMdeInstanceCallback = useCallback ( ( simpleMde : SimpleMDE ) => {
setMdeInstance ( simpleMde ) ;
} , [ ] ) ;
useEffect ( ( ) => {
simpleMdeInstance &&
console . info ( "Hey I'm editor instance!" , simpleMdeInstance ) ;
} , [ simpleMdeInstance ] ) ;
// codemirror
const [ codemirrorInstance , setCodemirrorInstance ] = useState < Editor | null > (
null
) ;
const getCmInstanceCallback = useCallback ( ( editor : Editor ) => {
setCodemirrorInstance ( editor ) ;
} , [ ] ) ;
useEffect ( ( ) => {
codemirrorInstance &&
console . info ( "Hey I'm codemirror instance!" , codemirrorInstance ) ;
} , [ codemirrorInstance ] ) ;
// line and cursor
const [ lineAndCursor , setLineAndCursor ] = useState < Position | null > ( null ) ;
const getLineAndCursorCallback = useCallback ( ( position : Position ) => {
setLineAndCursor ( position ) ;
} , [ ] ) ;
useEffect ( ( ) => {
lineAndCursor &&
console . info ( "Hey I'm line and cursor info!" , lineAndCursor ) ;
} , [ lineAndCursor ] ) ;
return (
< div >
< h4 > Getting instance of Mde and codemirror and line and cursor info </ h4 >
< SimpleMdeReact
value = "Go to console to see stuff logged"
getMdeInstance = { getMdeInstanceCallback }
getCodemirrorInstance = { getCmInstanceCallback }
getLineAndCursor = { getLineAndCursorCallback }
/>
</ div >
) ;
} ;這是您的做法。它需要模擬某些瀏覽器作品才能工作，但這是整個示例。
import { act , render , screen } from "@testing-library/react" ;
import { useState } from "react" ;
import { SimpleMdeReact } from "react-simplemde-editor" ;
import userEvent from "@testing-library/user-event" ;
// @ts-ignore
Document . prototype . createRange = function ( ) {
return {
setEnd : function ( ) { } ,
setStart : function ( ) { } ,
getBoundingClientRect : function ( ) {
return { right : 0 } ;
} ,
getClientRects : function ( ) {
return {
length : 0 ,
left : 0 ,
right : 0 ,
} ;
} ,
} ;
} ;
const Editor = ( ) => {
const [ value , setValue ] = useState ( "" ) ;
return < SimpleMdeReact value = { value } onChange = { setValue } /> ;
} ;
describe ( "Renders" , ( ) => {
it ( "succesfully" , async ( ) => {
act ( ( ) => {
render ( < Editor /> ) ;
} ) ;
const editor = await screen . findByRole ( "textbox" ) ;
userEvent . type ( editor , "hello" ) ;
expect ( screen . getByText ( "hello" ) ) . toBeDefined ( ) ;
} ) ;
} ) ; export interface SimpleMDEReactProps
extends Omit < React . HTMLAttributes < HTMLDivElement > , "onChange" > {
id ?: string ;
onChange ?: ( value : string , changeObject ?: EditorChange ) => void ;
value ?: string ;
extraKeys ?: KeyMap ;
options ?: SimpleMDE . Options ;
events ?: SimpleMdeToCodemirrorEvents ;
getMdeInstance ?: GetMdeInstance ;
getCodemirrorInstance ?: GetCodemirrorInstance ;
getLineAndCursor ?: GetLineAndCursor ;
placeholder ?: string ;
textareaProps ?: Omit <
React . HTMLAttributes < HTMLTextAreaElement > ,
"id" | "style" | "placeholder"
> ;
}default - 簡單反應SimpleMdeReact與default相同，但命名為
類型：
SimpleMdeReactProps組件的道具DOMEvent某些用於獲取事件的事件以下導出CopyEvents - 僅複製CodeMirror事件GlobalEvents其他一些全球codemirror事件DefaultEvent默認codemirror事件處理程序功能IndexEventsSignature期望字符串為鍵並返回DefaultEvent索引簽名SimpleMdeToCodemirrorEvents手動製作的事件（基於@types/[email protected] ， easymde在內部使用） +以上所有內容合併為codemirror事件名稱和events prop的實際處理程序之間的整個映射GetMdeInstance檢索MDE實例的回調函數的簽名GetCodemirrorInstance檢索CodeMirror實例的回調函數的簽名GetLineAndCursor檢索線路和光標信息的回調函數的簽名
simplemde本身。可能的破壞更改，因此我將版本撞到了V4。simplemde/dist/simplemde.min.css現在將是easymde/dist/easymde.min.css initialValue支柱已被刪除並替換為value道具，從而可以直接更改組件安裝後要進行的值。1.0版沒有配置良好的簡單選項，此讀數反映了對更好的選項的更改。這仍然是一個非常新的項目。歡迎和讚賞測試，反饋和PR。
