Ruby on Rails

Getting Started with Ruby on Rails

This quickstart demonstrates how to add our PhotoEditor SDK for HTML to a Ruby on Rails application in no time. Just follow the steps and you'll get a fully fledged photo editor in your rails app.

WARNING: The repository is not meant as a fully fledged Rails application, but as a base for further development instead.

Integration#

1. Init Rails

   rails new pesdk-rails-demo
   cd pesdk-rails-demo

2. Get PhotoEditor HTML5

   export VERSION=4.22.1
   wget "https://github.com/imgly/pesdk-html5-build/archive/v$VERSION.zip"
   unzip -x "v$VERSION.zip"

   with curl

   export VERSION=4.22.1
   curl -O -L "https://github.com/imgly/pesdk-html5-build/archive/v$VERSION.zip"
   unzip -x "v$VERSION.zip"

3. Copy files to vendor directory

   mkdir -p vendor/assets/javascripts
   cp "pesdk-html5-build-$VERSION/js/PhotoEditor"* vendor/assets/javascripts
   cp "pesdk-html5-build-$VERSION/js/vendor/"* vendor/assets/javascripts
   
   mkdir -p vendor/assets/stylesheets
   cp "pesdk-html5-build-$VERSION/css/PhotoEditor"* vendor/assets/stylesheets
   
   mkdir -p vendor/assets/images
   cp -R "pesdk-html5-build-$VERSION/assets/"* vendor/assets/images

4. Create new home controller with index page

   rails generate controller home index

5. Open app/views/home/index.html.erb

   HTML

   <!-- PESDK Demo Integration -->
   <div
     id="pesdk"
     style="width: 100vmin; height: 75vmin; padding: 0px; margin: 0px"
   ></div>

6. Update app/assets/javascripts/application.js

   JavaScript

   ...
   //= require react.production.min
   //= require react-dom.production.min
   //= require PhotoEditorSDK.min
   //= require PhotoEditorSDK.UI.ReactUI.min
   ...

7. Update app/assets/stylesheets/application.css

   ```css
   ...
   *= require PhotoEditorSDK.UI.ReactUI.min
   ...
   */
   ```

   Important: Insert the code snipped before the */

8. Edit app/assets/javascripts/home.coffee and insert

   window.onload = ->
     license = 'license-string' // <-- Please replace this with the content of your license file. The JSON-object must be in string format.
     container = document.getElementById('pesdk')
     editor = new (PhotoEditorSDK.UI.ReactUI)(
       container: container
       license: license
       assets:
         baseUrl: '/assets'
         resolver: (path) ->
           path
     )
     return

   If you don't want to use CoffeeScript, delete app/assets/javascripts/home.coffee, create app/assets/javascripts/home.js and insert

   JavaScript

   window.onload = function () {
     license = 'license-string'; // <-- Please replace this with the content of your license file. The JSON-object must be in string format.
     var container = document.getElementById('pesdk');
     var editor = new PhotoEditorSDK.UI.ReactUI({
       container: container,
       license: license,
       assets: {
         baseUrl: '/assets', // => Matches default asset url for rails
         resolver: function (path) {
           return path;
         },
       },
     });
   };

9. Start rails

   bundle exec rails server -p 3000

10. Open Webbrowser and go to http://localhost:3000/home/index

Switch between React- and DesktopUI#

In order to use the DesktopUI instead of the ReactUI, you need to make some changes to your setup. Replace in point ...

6. //= require PhotoEditorSDK.UI.ReactUI.min with //= require PhotoEditorSDK.UI.DesktopUI.min

7. *= require PhotoEditorSDK.UI.ReactUI.min with *= require PhotoEditorSDK.UI.DesktopUI.min

8. editor = new (PhotoEditorSDK.UI.ReactUI) with editor = new (PhotoEditorSDK.UI.DesktopUI) in home.coffee or

   var editor = new PhotoEditorSDK.UI.ReactUI with var editor = new PhotoEditorSDK.UI.DesktopUI in home.js