Negotiate Pushing Milestone

    ra-input-rich-text
    TypeScript icon, indicating that this package has built-in type declarations

    3.19.2 • Public • Published

    <RichTextInput> for react-admin

    For editing HTML with react-admin, use the <RichTextInput> component. It embarks quill, a popular cross-platform Rich Text Editor.

    <RichTextInput> example

    Installation

    npm install ra-input-rich-text --save-dev

    Usage

    import * as React from "react";
    import {
        DateInput,
        Edit,
        EditButton,
        TextInput,
    } from 'react-admin';
    import RichTextInput from 'ra-input-rich-text';
    
    const PostTitle = ({ record }) => {
        return <span>Post {record ? `"${record.title}"` : ''}</span>;
    };
    
    export const PostEdit = (props) => (
        <Edit title={<PostTitle />} {...props}>
            <TextInput disabled label="Id" source="id" />
            <TextInput source="title" validation={{ required: true }} />
            <TextInput multiline source="teaser" validation={{ required: true }} />
            <RichTextInput source="body" validation={{ required: true }} />
            <DateInput label="Publication date" source="published_at" />
        </Edit>
    );

    You can customize the rich text editor toolbar using the toolbar attribute, as described on the Quill official toolbar documentation.

    <RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />

    If you need more customization, you can access the quill object through the configureQuill callback that will be called just after its initialization.

    const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
        this.quill.format('bold', value)
    });
    
    // ...
    
    <RichTextInput source="text" configureQuill={configureQuill}/>

    Tip: When used inside a material-ui <Card> (e.g in the default <Edit> view), <RichTextInput> displays link tooltip as cut off when the user wants to add a hyperlink to a word located on the left side of the input. This is due to an incompatibility between material-ui's <Card> component and Quill's positioning algorithm for the link tooltip.

    To fix this problem, you should override the default card style, as follows:

    import { Edit, SimpleForm, TextInput } from 'react-admin';
    +import { withStyles } from '@material-ui/core/styles';
    
    -const PostEdit = props => (
    +const PostEdit = withStyles({ card: { overflow: 'initial' } })(props => (
       <Edit {...props}>
           <SimpleForm>
                // ...
           </SimpleForm>
       </Edit>
    -);
    +));

    License

    This library is licensed under the MIT License, and sponsored by marmelab.

    Install

    npm i ra-input-rich-text

    DownloadsWeekly Downloads

    8,611

    Version

    3.19.2

    License

    MIT

    Unpacked Size

    237 kB

    Total Files

    31

    Last publish

    Collaborators

    • fzaninotto
    • djhi