editor

A React Wrapper Built For The Trix Editor

Aug 04, 2021
A React Wrapper Built For The Trix Editor

React Trix RTE

React Trix rich text editor is react wrapper built for the Trix editor created by Basecamp. We have built this library because we were rewriting the same component in multiple project.

This wrapper uses React hooks and adds readable event listeners on the Trix editor. The library also adds two toolbar components which has the ability to customize the toolbar actions as per our need.

React-Trix-RTE

View Demo View Github

Installation

To install the React Trix RTE, run the following command in the console.

npm install react-trix-rte OR yarn add react-trix-rte

Usage

import Trix from "trix"; import React, { useState } from "react"; import { ReactTrixRTEInput } from "react-trix-rte"; export default function TrixEditor(props) { const [value, setValue] = useState(""); function handleChange(event, newValue) { setValue(newValue); // OR custom on change listener. } return ( <ReactTrixRTEInput defaultValue="<div>React Trix Rich Text Editor</div>" onChange={handleChange} /> ) }

Upgrading to 1.0.7 or higher

React Trix RTE version 1.0.7 removes the dependency import for Trix because using Trix outside directly causes problems. Read issue: 17 and 19.

Import import Trix from "trix"; to the component using React Trix RTE.

ReactTrixInput API

ReactTrixInput is the Trix editor input which by default comes with the toolbar. The ReactTrixInput comes with following properties that could be accepted.

NameTypeDescription
idstringThe HTML id attribute for the input field
namestringThe HTML name attribute for the input field
toolbarIdstringIf a custom toolbar is used for the Trix Input, pass the toolbarId of the custom toolbar to the input.
isRailsDirectUploadbooleanReact Trix editor support direct uploading of the files to the service if you are using Rails as a backend server. This defaults to false
placeholderstringAdds a placeholder to the React Trix Input
defaultValuestringThe default value of the React Trix Input
autofocusbooleanAutofocus in the trix input. This is defaults to false
classNamestringApply a custom css class to the editor
trixInputReffunctionAdds a custom ref to the React Trix Input to programmatically edit text. Read the documentation for manual things you can perform on Trix editor here
onBeforeInitializefunctionFires when the <trix-editor> element is attached to the DOM just before Trix installs its editor object.
onInitializefunctionFires when the <trix-editor> element is attached to the DOM and its editor object is ready for use.
onChangefunctionFires whenever the editor’s contents have changed.
onSelectionChangefunctionFires any time the selected range changes in the editor.
onBlurfunctionFire when the editor loses focus.
onFocusfunctionFire when the editor gains focus.
onFileAcceptedfunctionFires when a file is dropped or inserted into the editor. You can access the DOM File object through the file property on the event. Call preventDefault on the event to prevent attaching the file to the document.
onAttachmentAddfunctionFires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute. See the attachment example for detailed information.
onAttachmentRemovefunctionFires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.

ReactTrixRTEToolbar API

ReactTrixRTEToolbar is the custom Trix editor toolbar component. This component helps in customizing the toolbar options, classes and attributes in better way.

NameTypeDescription
toolbarIdstringThe ReactTrixInput initialize the default toolbar if the toolbarId is missing or not matching. Make sure the toolbarId matches.
disableGroupingActionbooleanDefaults to false. If the disableGroupingAction is enabled the toolbar actions are not grouped for a type. Example: text tools won't be grouped
toolbarActionsarrayAllows customizing the list of toolbar actions. The available actions are ["bold", "italic", "strike", "link", "heading1", "quote", "code", "bullet", "number", "outdent", "indent", "attachFiles", "undo", "redo"].
customToolbarActionsobjectOverride the toolbar actions properties or add custom toolbar actions. You can refer to default toolbar actions options

Custom Toolbar Usage

import React, { useState } from "react"; import Trix from "trix"; import { ReactTrixRTEInput, ReactTrixRTEToolbar } from "react-trix-rte"; export default function TrixEditor(props) { const [value, setValue] = useState(""); function handleChange(event, newValue) { setValue(newValue); // OR custom on change listener. } return ( <Fragment> <ReactTrixRTEToolbar toolbarId="react-trix-rte-editor" /> <ReactTrixRTEInput toolbarId="react-trix-rte-editor" defaultValue="<div>React Trix Rich Text Editor</div>" onChange={handleChange} /> </Fragment> ) }
Recommended