Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@yeutech/ra-input-rich-text

2.0.0-RC2-yeutech.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.

 example

Installation

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

Usage

import React from 'react';
import {
    DateInput,
    Edit,
    EditButton,
    LongTextInput,
    TextInput,
} from '@yeutech/react-admin';
import RichTextInput from '@yeutech/ra-input-rich-text';
 
const PostTitle = ({ record }) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
 
export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
        <DisabledInput label="Id" source="id" />
        <TextInput source="title" validation={{ required: true }} />
        <LongTextInput 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'] ]} />

License

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

Install

npm i @yeutech/ra-input-rich-text

DownloadsWeekly Downloads

6

Version

2.0.0-RC2-yeutech.2

License

MIT

Unpacked Size

14 kB

Total Files

6

Last publish

Collaborators

  • avatar
  • avatar