React wrapper around Basecamp's Trix editor.
npm install react-trixReact wrapper around Trix editor from Basecamp. With additional features that I
needed when I was CTO at Roadmap when sending emails and collaborating with comments.
``bash`
npm install react-trix --save
Trix 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.
#### Classic script tag
`html`
#### Or via npm
`bash`
npm i trix
`jsx`
import "trix/dist/trix";
If you're using npm version with SSR make sure to import trix on page level.
`jsx
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 (
);
}
}
`
Those are the optional properties you can use on the .
New in v0.7.0
The default name for the file upload is file. You may use the fileParamName blob
to change its name, for instance to work with Ruby on Rails.
`jsx`
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 }}"}
]
}]
autoFocus={true}
placeholder="editor's placeholder"
value="initial content for the editor"
uploadURL="https://domain.com/imgupload/receiving/post"
uploadData={{"key1": "value", "key2": "value"}}
fileParamName="blob"
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:
`css
.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.