ActiveAdmin Integration

Using with ActiveAdmin

After installing the jsoneditor-rails gem, in your ActiveAdmin integration do the following steps for enabling the JSON Editor. This assumes you already have a model with a jsonb column type.

1. Create the file: touch app/admin/inputs/jsonb_input.rb

2. Define a custom Formtastic input (this is a textarea) that will later render the JSON Editor:

   class JsonbInput < Formtastic::Inputs::TextInput
   
     def current_value
       (object.public_send(method) || {}).to_json
     end
   
     def input_html_options
       { value: current_value, class: 'js-jsoneditor' }.merge(super)
     end
   
     def to_html
       input_wrapping do
         label_html << builder.text_area(method, input_html_options)
       end
     end
   
   end

   Note the .js-jsoneditor class name which is an example hook to use from JS to find the text area for use with JSON Editor.

3. Create an attribute using Rails Attributes API for jsonb support

4. Write the necessary JS that finds the input and initializes the JSON Editor