現在我們的編輯器顯示的內容很單一，這自然不是我們的目標，讓呈現的內容多元化是我們的追求。這就需要讓編輯器能夠接收多元素的定義。從初始數據的定義我們可以推斷數據的格式遠不止一種，那么其它類型的數據如何定義及呈現的呢，我們新建一個文件elements.jsx,創建一個元素組件：

_elements.jsx

export const CodeElement = props => {return (<pre {...props.attributes}><code>{props.children}</code></pre>)
}

這個組件平常的不能再平常了。就是一個 <pre/>元素。當然我們還要添加一個默認的渲染元素，如下所示：

export const DefaultElement = props => {return <p {...props.attributes}>{props.children}</p>
}

我們要讓這個元素和數據對應起來，修改configure.jsx中的初始化值，添加如下內容：

_configure.jsx

export const initialValue = [{type: 'paragraph',children: [{ text: '這是一行段落文字，內容很少，但很重要！！' }],},{type: 'code',children: [{ text: '這是一代碼行段落文字，內容很少，但很重要！！' }],},
];

我們增加一個code數據段。接下來要做的就是我們要設置一個渲染器， 根據數據類型的不同渲染不同的元素：

const renderElement = useCallback(props => {switch (props.element.type) {case 'code':return <CodeElement {...props} />default:return <DefaultElement {...props} />}}, [])

當然還要把這個渲染器指定給 Editable的renderElement屬性:

<EditablerenderElement={renderElement}onKeyDown={event => {if (event.key === '&') {event.preventDefault()editor.insertText('and')}}}
/>

完整的代碼如下：

SDocer.jsx

import { useState } from 'react';
import { createEditor } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';
import { CodeElement, DefaultElement } from './_elements';function SDocer() {const [editor] = useState(() => withReact(createEditor()));const renderElement = useCallback(props => {switch (props.element.type) {case 'code':return <CodeElement {...props} />default:return <DefaultElement {...props} />}}, []);return (<Slate editor={editor} initialValue={initialValue}><EditablerenderElement={renderElement}onKeyDown={event => {if (event.key === '&') {event.preventDefault()editor.insertText('and')}}}/></Slate>)
}export default SDocer;

效果如下：

現在新的要求來了，我們希望能動態的把選中的段落轉換化<pre>元素，相反也能轉化回默認元素。為了讓兩者的元素有較大的變化，我們對CodeElement元素組件加個樣式，看下面的代碼：

export const CodeElement = props => {return (<pre{...props.attributes}style={{fontSize: "20px",lineHeight: 2,}}><code>{props.children}</code></pre >)
}

然后對 SDocer修改如下：

import { useState, useCallback} from 'react';
import { createEditor, Editor, Transforms, Element } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';
import { CodeElement, DefaultElement } from './_elements';function SDocer() {const [editor] = useState(() => withReact(createEditor()));const renderElement = useCallback(props => {switch (props.element.type) {case 'code':return <CodeElement {...props} />default:return <DefaultElement {...props} />}}, []);return (<Slate editor={editor} initialValue={initialValue}><EditablerenderElement={renderElement}onKeyDown={event => {if (!event.ctrlKey) return;if (event.key === '`') {event.preventDefault()const [match] = Editor.nodes(editor, {match: n => n.type === 'code',})Transforms.setNodes(editor,{ type: match ? 'paragraph' : 'code' },{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) })}}}/></Slate>)
}export default SDocer;

這樣，如果您按 Ctrl + ' 時光標所在的塊應該會變成一個代碼塊。再次按一次時就變成普通的文本段落。如下所示：