Last week, Gordo gave a great presentation at the React meetup on integrating other libraries with React. Specifically, he explained how to get React’s lifecycle and immutable state paradigms to play nicely with libraries that rely on a mutable DOM.
Since we are introducing a text editor in Bambu, I thought this would be a great opportunity to verify whether either of the methods Gordo demonstrated would work with the Trix Editor.
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Trix + React</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.9.5/trix.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <h1>Trix + React</h1> | |
| <p><a href="http://requestb.in/us2a5mus?inspect" target="_blank">Inspect previous requests</a></p> | |
| <form action="http://requestb.in/us2a5mus" method="post"> | |
| <input id="x" type="hidden" name="content"> | |
| <trix-editor class="trix-content" input="x"></trix-editor> | |
| <div class="custom-buttons"> | |
| <button type="button" onclick="document.querySelector('trix-editor').editor.activateAttribute('h2')">h2</button> | |
| <button type="button" onclick="document.querySelector('trix-editor').editor.activateAttribute('h3')">h3</button> | |
| </div> | |
| <button class="submit">Submit</button> | |
| </form> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.9.5/trix.js"></script> | |
| <script> | |
| Trix.config.blockAttributes['h2'] = {tagName: 'h2'}; | |
| Trix.config.blockAttributes['h3'] = {tagName: 'h3'}; | |
| </script> | |
| </body> | |
| </html> |
| @import url(https://fonts.googleapis.com/css?family=Lato); | |
| body { | |
| color: #515e60; | |
| font: 14px/1 'Lato', sans-serif; | |
| letter-spacing: .01em; | |
| margin: 0 auto; | |
| max-width: 600px; | |
| padding: 30px; | |
| } | |
| button { | |
| border-radius: 3px; | |
| box-sizing: border-box; | |
| cursor: pointer; | |
| font: inherit; | |
| letter-spacing: inherit; | |
| line-height: 20px; | |
| padding: 5px 15px; | |
| } | |
| .trix-content { | |
| color: inherit; | |
| font-size: 16px; | |
| line-height: 20px; | |
| min-height: 200px; | |
| padding: 10px; | |
| } | |
| .custom-buttons { | |
| padding: 20px 0; | |
| } | |
| .custom-buttons button { | |
| background: none; | |
| border: 1px solid #dfe1e1; | |
| color: inherit; | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .submit { | |
| background: #11a7aa; | |
| border: none; | |
| border-radius: 3px; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| .submit:focus, | |
| .submit:hover { | |
| border-bottom: 1px solid #0f6270; | |
| outline: none; | |
| transform: translateY(-1px); | |
| } | |
| .submit:active { | |
| border: none; | |
| transform: none; | |
| } |