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

Init Rails

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

Get PhotoEditor HTML5

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

with curl

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

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

Create new home controller with index page
```
 rails generate controller home index
```

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

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

Update app/assets/javascripts/application.js

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

Update app/assets/stylesheets/application.css
```
 ...
 *= require PhotoEditorSDK.UI.ReactUI.min
 ...
 */
```
Important: Insert the code snipped before the */

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

 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 }
     }
   })
 }

Start rails
```
 bundle exec rails server -p 3000 
```
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 …

//= require PhotoEditorSDK.UI.ReactUI.min with //= require PhotoEditorSDK.UI.DesktopUI.min
*= require PhotoEditorSDK.UI.ReactUI.min with *= require PhotoEditorSDK.UI.DesktopUI.min
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