https://github.com/dstpierre/react-trix

React wrapper around Trix editor from Basecamp + some lightweight features
https://github.com/dstpierre/react-trix

Last synced: 3 months ago
JSON representation

React wrapper around Trix editor from Basecamp + some lightweight features

• Host: GitHub
• URL: https://github.com/dstpierre/react-trix
• Owner: rob-race
• License: isc
• Created: 2015-10-17T21:18:57.000Z (about 9 years ago)
• Default Branch: main
• Last Pushed: 2024-01-12T21:58:41.000Z (10 months ago)
• Last Synced: 2024-04-13T21:01:40.443Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 604 KB
• Stars: 212
• Watchers: 3
• Forks: 40
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-wysiwyg - react-trix - React wrapper for Basecamp's Trix editor. (For React)
• awesome-wysiwyg-editors - react-trix - Basecamp 的 Trix 编辑器的 React 包装器。  (基于 React)

README

        
# React Trix 0.10.2

React wrapper around [Trix](https://github.com/basecamp/trix) editor from Basecamp. With additional features that I

needed when I was CTO at Roadmap when sending emails and collaborating with comments.

## Getting started

### Install via npm

```bash

npm install react-trix --save

```

Trix will be included as dependency. You should already have [React](https://facebook.github.io/react) installed.

### Usage

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 (

      

    );

  }

}

```

### Properties

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` 

to change its name, for instance `blob` 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 }}"}

  ]

}]

```

### Merge tags

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 */

}

```

## Running the tests

Still having some issues testing Trix with enzyme/jsdom.

## Contributions

Contributions are welcome and appreciated.