UNPKG

@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
# 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 package] ```shell npm install -S @agilie/ra-tinymce-input ``` # Usage ```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]. # 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](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] (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