Posted 5 months ago. Visible to the public.

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

Integrating it with Webpack as described in the documentation – by using ace-builds and ace-builds/webpack-resolver – failed pretty hard for me. Maybe because Rails' Webpacker is still on Webpack 2.
The following works for Ruby on Rails with Webpacker / Webpack 2.

  1. Do not use the ace-builds NPM package, because you won't be able to load it properly. Instead, use brace:

    yarn add brace
  2. You can then import and use ace, mode configuration, and styles like so:

    import ace from 'brace' import 'brace/mode/html' import 'brace/theme/monokai' let editor = ace.edit(element) ...

Full-fledged example for an Unpoly compiler that will improve your <textarea html-editor>:

import ace from 'brace' import 'brace/mode/html' import 'brace/theme/monokai' up.compiler('[html-editor]', ($element) => { let $editorContainer = $('<div>').insertAfter($element) let editor = ace.edit($editorContainer.get(0)) let session = editor.getSession() editor.setOptions({ mode: 'ace/mode/html', theme: 'ace/theme/monokai', minLines: 50, maxLines: 50, fontSize: '16px', wrap: true, useSoftTabs: true, tabSize: 2, }) // If we enable Ace on the textarea directly, it will lose its value and never send any changes to the server. // Instead, we use a container element and sync any changes into the textarea. $element.hide() session.setValue($element.val()) session.on('change', () => { $element.val(session.getValue()) }) return () => { editor.destroy() } })
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Arne Hartherz
Last edit:
5 months ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more