React富文本编辑器开发（三）

现在我们的编辑器显示的内容很单一，这自然不是我们的目标，让呈现的内容多元化是我们的追求。这就需要让编辑器能够接收多元素的定义。从初始数据的定义我们可以推断数据的格式远不止一种，那么其它类型的数据如何定义及呈现的呢，我们新建一个文件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;