All Projects → marmelab → aor-rich-text-input

marmelab / aor-rich-text-input

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

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language
Makefile
30231 projects

Projects that are alternatives of or similar to aor-rich-text-input

ra-language-japanese
Japanese messages for react-admin
Stars: ✭ 22 (-4.35%)
Mutual labels:  admin-on-rest
forest-guard
Forest Guard is a [Taiga](https://taiga.io/) dashboard for managers to see who is doing what on their different Taiga projects.
Stars: ✭ 26 (+13.04%)
Mutual labels:  admin-on-rest
api-platform-on-rest
api-platform & admin-on-rest
Stars: ✭ 12 (-47.83%)
Mutual labels:  admin-on-rest
React Admin
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
Stars: ✭ 18,525 (+80443.48%)
Mutual labels:  admin-on-rest
aor-dependent-input
A component for displaying input depending on other inputs values in Admin-on-rest
Stars: ✭ 60 (+160.87%)
Mutual labels:  admin-on-rest
ra-language-spanish
Spanish translations for React-Admin framework
Stars: ✭ 19 (-17.39%)
Mutual labels:  admin-on-rest
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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].