@gulibs/prosemirror-plugin-style-headings NPM

prosemirror-plugin-style-heading

Prosemirror插件,添加了几种heading nodes

Install

npm install --save @gulibs/prosemirror-plugin-style-heading

yarn add @gulibs/prosemirror-plugin-style-heading

Usage

挂载插件

import React, { Component } from 'react'
import { headings } from '@gulibs/prosemirror-plugin-style-heading'

class Example extends Component {
  render() {
    return (
        <ProseMirrorEditor
            config={{
                schema,
                plugins: [
                    ...
                    // 添加插件
                    headings(),
            ]}}
            autoFocus
            onRender={({ editor }) => (
                <Card type="inner" bordered={false}>
                    <EditorToolBar menus={menus} />
                    {editor}
                </Card>
            )}
        />
    )
  }
}

在nodes.ts文件中添加 heading nodes

import { nodes } from 'prosemirror-schema-basic'
import { arrowRightHeading, centerLineHeading, decimalHeading } from '@gulibs/prosemirror-plugin-style-headings';

export default {
    ...nodes,
    arrowRightHeading,
    centerLineHeading,
    decimalHeading
}

menus.tsx

// 导入blockDecimal命令
import { blockDecimal } from '@gulibs/prosemirror-plugin-style-headings';

// 按钮
const headingSelect = {
    selectHeading: {
            tooltips: {
                title: '标题',
                placement: 'bottom'
            },
            icon: Icons.heading,
            showDropdown: true,
            children: [
                {
                    title: '标题样式-1',
                    active: blockActive(schema.nodes.arrowRightHeading),
                    enable: setBlockType(schema.nodes.arrowRightHeading),
                    run: setBlockType(schema.nodes.arrowRightHeading)
                },
                {
                    title: '标题样式-2',
                    active: blockActive(schema.nodes.centerLineHeading),
                    enable: setBlockType(schema.nodes.centerLineHeading),
                    run: setBlockType(schema.nodes.centerLineHeading)
                },
                {
                    title: 'Decimal样式-3',
                    active: blockActive(schema.nodes.decimalHeading),
                    enable: setBlockType(schema.nodes.decimalHeading),
                    run: blockDecimal(schema)
                }
            ]
        }
    }