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
-
Init Rails
rails new pesdk-rails-demo cd pesdk-rails-demo
-
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"
-
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 insertwindow.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
, createapp/assets/javascripts/home.js
and insertwindow.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)
witheditor = new (PhotoEditorSDK.UI.DesktopUI)
inhome.coffee
orvar editor = new PhotoEditorSDK.UI.ReactUI
withvar editor = new PhotoEditorSDK.UI.DesktopUI
inhome.js