Minditor 是一个既注重最终用户编辑体验，又注重开发者体验的块级富文本编辑器。它有以下特点：

• 已经提供了例如图片上传、markdown 命令等重要的组件和 Plugin，并将由官方持续完善，目标默认就提供达到专业编辑工具的用户体验。
• 支持 InlineBlock，可在行内插入。
• 可以用任何框架的组件来实现编辑器的 Block/InlineBlock。
• 除了常见的事件和 api 外， Plugin 系统还为开发者默认提供一系列重要的 reactive state，让开发 Plugin 变得无比简单。

安装与初始化

npm i minditor

Minditor 本身的可以渲染在任意的 dom 节点中。对外没有任何的布局、样式等要求.

如果你只是用来渲染最简单的文字。可以直接使用下面的方式来渲染：

import {
    Code, Grid,Heading,InlineImageBlock,InlineCode,Link,OLItem,Paragraph,Text,ULItem,InlineImageBlock
} from "minditor";

const rootElement = document.getElementById('root')!
const types = {
    Paragraph,Text,Heading,OLItem,ULItem,InlineCode,Code,Link,Grid,Image: InlineImageBlock
}
const data = {
    name: 'MyDoc',
    children: [{
        type: 'Paragraph',
        content: [{type:'Text', value: 'This is my first document.'}]
    }]
}
const doc = new Document(rootElement, data, types)
doc.render()

对于需要完整 Plugin，希望视图匡高自动适应外部 container 的场景，我们推荐使用 scaffold 来创建视图：

import {
    Code,
    createBlockTool,
    createRangeTool,
    createSuggestionTool,
    defaultBlockWidgets,
    defaultFormatWidgets,
    defaultMarkdownPlugins,
    defaultSuggestionWidgets,
    Grid,
    Heading,
    InlineImageBlock,
    InlineCode,
    Link,
    OLItem,
    Paragraph,
    scaffold,
    Text,
    ULItem,
    createTOCTool
} from "minditor";

const root= document.getElementById('root')!
const types = {
    Paragraph,
    Text,
    Heading,
    OLItem,
    ULItem,
    InlineCode,
    Code,
    Link,
    Grid,
    Image: InlineImageBlock
}
const plugins = [
    ...defaultMarkdownPlugins,
    createBlockTool(defaultBlockWidgets),
    createRangeTool( defaultFormatWidgets ),
    createSuggestionTool(defaultSuggestionWidgets),
    createTOCTool()
]
const result = scaffold(root, {data: jsonData, types, plugins}, { debug: true })
result.render()

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4131