Skip to content
This repository has been archived by the owner on May 4, 2019. It is now read-only.

<RichTextInput> component for admin-on-rest, useful for editing HTML code in admin GUIs

License

Notifications You must be signed in to change notification settings

marmelab/aor-rich-text-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

archived Archived Repository
This code is no longer maintained. Feel free to fork it, but use it at your own risks.

<RichTextInput> for admin-on-rest

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

<RichTextInput> example

Installation

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

Usage

import React from 'react';
import {
    DateInput,
    Edit,
    EditButton,
    LongTextInput,
    TextInput,
} from 'admin-on-rest/mui';
import RichTextInput from 'aor-rich-text-input';

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 Licence, and sponsored by marmelab.