0

大家好，我目前正在使用 SlateJs 构建我的个人博客。

我想为编辑器采用一些有用的第三方插件

但我无法让它工作。

下面的代码来自官方 Slate(v0.66.1) 文档，我用这段代码构建了我的编辑器。

import React, { useMemo, useState } from 'react'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

const App = () => {
  const initialValue: Descendant[] = [
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }],
    },
  ]
  const editor = useMemo(() => withReact(createEditor()), [])
  const [value, setValue] = useState<Descendant[]>(initialValue)
  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable />
    </Slate>
  )
}

在拥有了我非常基本的编辑器之后，我发现了一些有用的第三方插件来让我的编辑器更强大。 https://convertkit-slate-plugins.netlify.app/plugins/slate-lists

但是他们将插件与 Slate 编辑器集成的方式有点不同。

他们只使用 <Editor> 而不是用 <Slate> 组件包裹的 <Editable>，

在 <Editor> 中，它们具有 <Editable> 所没有的 plugins 属性。

下面的代码来自插件的文档，我猜它是为在 Slate v.047 中工作而编写的

import { Editor } from "slate-react";
import Lists from "@convertkit/slate-lists"

const plugins = [Lists({
  blocks: {
    ordered_list: "ordered-list",
    unordered_list: "unordered-list",
    list_item: "list-item",
  },
  classNames: {
    ordered_list: "ordered-list",
    unordered_list: "unordered-list",
    list_item: "list-item"
  }
})]

const MyEditor = (props) => (
  <Editor
    ...
    plugins={plugins}
  />
)

我认为他们初始化编辑器的方式取决于版本。

但我想知道是否有人有想法将插件集成到我的编辑器中？

感谢您的时间！！

4

0 回答 0