React DraftJS

[DraftJS] DraftJS RichText and Plugins

Posted by Jarxi on 2020-10-31

DraftJS

  1. Official Documentation

  2. Plugins

    • SideToolBar plugin
    • Side Tool Bar button position is off: set client/node_modules/draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect/index.js svg viewbox to “0 6 24 24” instead of “0 0 24 24”
    • SideToolBar customize buttons
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    import React from 'react';
    import { EditorState } from 'draft-js';
    import Editor from 'draft-js-plugins-editor';
    import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
    import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect';
    import { HeadlineOneButton, BlockquoteButton } from 'draft-js-buttons';

    import './MyEditor.css';
    import 'draft-js/dist/Draft.css';
    import 'draft-js-side-toolbar-plugin/lib/plugin.css';

    const DefaultBlockTypeSelect = ({
    	getEditorState,
    	setEditorState,
    	theme,
    }) => (
    	<BlockTypeSelect
    		getEditorState={getEditorState}
    		setEditorState={setEditorState}
    		theme={theme}
    		structure={[HeadlineOneButton, BlockquoteButton]}
    	/>
    );

    const sideToolbarPlugin = createSideToolbarPlugin({
    	structure: [DefaultBlockTypeSelect],
    });

    const { SideToolbar } = sideToolbarPlugin;

    const plugins = [sideToolbarPlugin];

赏 支付宝打赏 微信打赏

赞赏一下



FEATURED TAGS
React DraftJS