Ask A Question

Notifications

You’re not receiving notifications from this thread.

Trix editor in react native

davidlbean asked in Javascript

Anyone have suggestions for how to implement the trix editor in a react native front end? The key is I want to maintain trix’s mention functionality and the attachment of images. Ultimately I’d like to replicate how basecamp does this in their mobile app. Seems like using a webview is the easiest approach. If so, do you use a generic endpoint for editing a rich content field or do you serve up a page for the rich content editing of each of your models?

Reply

For anyone else working on this issue, I've made some progress:

I created a route in the Rails backend that requires no authentication and will render a trix-editor element along with some customizations I like. I have RN call that route when rending a WebView component. In the HTML template that renders the trix-editor, I also added a Save button and on the button's click event handler, I call this: window.ReactNativeWebView.postMessage(trix_editor.innerHTML). Back in RN, the WebView component accepts that message and stuffs the data into a state var that I can then drop into a set of attributes/values to submit to the backend to actually create the associated record.

The idea I'm working on is to have a generic rich text editor delivered via WebView such that I can drop it into any form and work as if the rich text field were just another input field.

Reply

Aha...and I needed to watch this for the last step: https://gorails.com/episodes/trix-editor?autoplay=1

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,277+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.