@agilie/ra-tinymce-input
Version:
Rich Text Input component for React Admin, useful for editing HTML content in admin GUI
88 lines (62 loc) • 3.1 kB
Markdown
Rich Text Input component for [React Admin]
based on the [TinyMCE] editor, useful for editing HTML content in admin GUI
You can get the latest version of RA TinyMCE Input from [npm][npm package]
```shell
npm install -S @agilie/ra-tinymce-input
```
```javascript
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][TinyMCE docs].
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
Problems? Check the [Issues](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.
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] (web@agilie.com)
# Contributors
- [Sergey Mell]
- [Maksym Ferber]
[npm package]: https://www.npmjs.com/package/@agilie/ra-tinymce-input
[TinyMCE docs]: https://www.tiny.cloud/docs/
[React Admin]: https://marmelab.com/react-admin
[TinyMCE]: https://www.tiny.cloud
[Agilie Team]: https://agilie.com/en/index
[Sergey Mell]: https://github.com/SergeyMell
[Maksym Ferber]: https://github.com/EvenOff-first