froala editor

Demonstrate uploading images from Froala to Cloudinary

by spinal007

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/1.2.2/css/froala_editor.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/1.2.2/js/froala_editor.min.js"></script>
<div id="msg"></div>
<div class="edit">
    <h1>hello</h1>
    <p>do you want to edit me?</p>    
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700,900);
body, html {
    margin: 0; padding: 0;
    height: 100%;
    min-height: 100%;
}
.edit {
    font-family: Raleway;
    position: absolute; 
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
#msg {
  text-align: center;
  font-size: x-large;
  color: red;
}

JavaScript

var cloud_name = "yourcloud"; // from https://cloudinary.com/console
var api_key = "yourapikey"; // from https://cloudinary.com/console
var unsigned_preset = "yourpreset"; // created at https://cloudinary.com/console/settings/upload 

if( cloud_name === "yourcloud" || api_key === "yourapikey" || unsigned_preset === "yourpreset") {
    $('#msg').text( "You need to put real values in the variables to make this work!");
}

// patching `parseJSON` because Froala doesn't allow customization of response
var _parseJSON = jQuery.parseJSON;
jQuery.parseJSON = function(j) {
    var response = _parseJSON(j);
    // TODO proper selection of url / secure_url based on the document link
    response.link = response.url; // Froala expects `link`
    return response;
};

$('.edit').editable({
    inlineMode: false,
    imageUploadURL: "https://api.cloudinary.com/v1_1/" + cloud_name + "/auto/upload",
    imageUploadParams: {
        upload_preset: unsigned_preset,
        api_key: api_key
    }
});