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

news2025/11/4 10:29:57

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

<Editable
  renderElement={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}>
      <Editable
        renderElement={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}>
      <Editable
        renderElement={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;