RA TinyMCE Input

Rich Text Input component for React Admin based on the TinyMCE editor, useful for editing HTML content in admin GUI

Installation

You can get the latest version of RA TinyMCE Input from npm

npm install -S @agilie/ra-tinymce-input

Usage

import * as React from "react";
import { Create, SimpleForm, TextInput, DateInput } from 'react-admin';
import { RichTextInput } from '@agilie/ra-tinymce-input';

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="title"/>
            <RichTextInput source="body"
                           initialValue="<p>This is the initial content of the editor.</p>"
                           init={{
                               height: 500,
                               menubar: false,
                               plugins: [
                                   'advlist autolink lists link image charmap print preview anchor',
                                   'searchreplace visualblocks code fullscreen',
                                   'insertdatetime media table paste code help wordcount'
                               ],
                               toolbar: 'undo redo | formatselect | ' +
                                   'bold italic backcolor | alignleft aligncenter ' +
                                   'alignright alignjustify | bullist numlist outdent indent | ' +
                                   'removeformat | help',
                               content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                           }} />
            <DateInput label="Publication date" source="published_at" defaultValue={new Date()}/>
        </SimpleForm>
    </Create>
);

You can customize the rich text editor by adding additional attributes, as described on the TinyMCE official documentation.

Roadmap

1. ~~Basic implementation of React Admin rich text editor on the basis of TinyMCE editor~~
2. ~~Map all the original properties of TinyMCE editor to the react admin component~~
3. Map all the react admin input properties to an editor and implement the correspondent behavior
4. Codestyle, tests, correct proptypes

Troubleshooting

Problems? Check the Issues block to find the solution or create a new issue, and we will do our best to fix it asap. Feel free to contribute. This project is intended to be a safe, welcoming space for collaboration.

License

The library is available as open source under the MIT License (MIT) Copyright © 2021 Agilie Team

Author

This library is open-sourced by Agilie Team ([email protected])

Contributors

• Sergey Mell
• Maksym Ferber