React wrapper around Trix editor from Basecamp. With additional features that we're needing at Roadmap when sending emails and collaborating with comments.
npm install react-trix --saveTrix will be included as dependency. You should already have React installed.
Make sure you have the latest Trix JavaScript and optionally their CSS on pages where you are using react-trix.
<script src="https://rawgit.com/basecamp/trix/master/dist/trix.js"></script>npm i triximport trix from 'trix'If you're using npm version with SSR make sure to import trix on page level.
import * as React from "react";
import { TrixEditor } from "react-trix";
export class Test extends React.Component {
handleEditorReady(editor) {
// this is a reference back to the editor if you want to
// do editing programatically
editor.insertString("editor is ready");
}
handleChange(html, text) {
// html is the new html content
// text is the new text content
}
render() {
return (
<TrixEditor onChange={this.handleChange} onEditorReady={this.handleEditorReady} />
);
}
}Those are the properties you can use on the <TrixEditor />.
let mergeTags = [{
trigger: "@",
tags: [
{name: "Dominic St-Pierre", tag: "@dominic"},
{name: "John Doe", tag: "@john"}
]
}, {
trigger: "{",
tags: [
{name: "First name", tag: "{{ .FirstName }}"},
{name: "Last name", tag: "{{ .LastName }}"}
]
}]
<TrixEditor
autoFocus={true}
placeholder="editor's placeholder"
value="initial content <strong>for the editor</strong>"
uploadURL="https://domain.com/imgupload/receiving/post"
uploadData={{"key1": "value", "key2": "value"}}
mergeTags={mergeTags}
onChange={on_change_handler}
onEditorReady={on_editor_ready_handler}
/>You give a trigger character, for example "@" and when the user type this character a small popup suggestions
will be displayed where user can click and the tag will be added.
You may customize the suggestion box via the CSS class react-trix-suggestions like this:
.react-trix-suggestions {
/* for the container */
}
.react-trix-suggestions a {
/* for each suggestion */
}Still having some issues testing Trix with enzyme/jsdom.
Contributions are welcome and appreciated.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent