wysiwyg-editor-node-sdk
Version:
Node.js SDK for Froala Editor
334 lines (289 loc) • 11.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include Font Awesome. -->
<link href="/bower_components/font-awesome/css/fontawesome.min.css" rel="stylesheet" type="text/css" />
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/colors.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/file.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/image.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/table.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/video.css">
<link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/markdown.css">
<!-- Include Froala Editor -->
<script src="/bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/align.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/char_counter.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/code_beautifier.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/code_view.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/colors.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/emoticons.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/entities.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/file.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/font_family.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/font_size.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/fullscreen.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/image.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/image_manager.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/inline_style.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/line_breaker.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/link.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/lists.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/paragraph_format.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/paragraph_style.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/quote.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/save.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/table.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/video.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/edit_in_popup.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/edit_in_popup.min.js"></script>
<script src="/bower_components/froala-wysiwyg-editor/js/plugins/track_changes.min.js"></script>
<!-- End Froala -->
<link rel="stylesheet" href="./app.css">
</head>
<body>
<div class="sample">
<h2>Sample 1: Save to disk</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
(function() {
var editor = new FroalaEditor('#edit', {
imageUploadURL: '/upload_image',
imageUploadParams: {
id: 'my_editor'
},
fileUploadURL: '/upload_file',
fileUploadParams: {
id: 'my_editor'
},
imageManagerLoadURL: '/load_images',
imageManagerDeleteURL: "/delete_image",
imageManagerDeleteMethod: "POST",
videoUploadURL: '/upload_video',
events : {
// Catch image removal from the editor.
'image.removed': function ( $img) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_image",
// Request params.
data: {
src: $img.attr('src')
}
})
.done (function (data) {
console.log ('image was deleted');
})
.fail (function (err) {
console.log ('image delete problem: ' + JSON.stringify(err));
})
},
// Catch video removal from the editor.
'video.removed': function ( $video) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_video",
// Request params.
data: {
src: $video.attr('src')
}
})
.done (function (data) {
console.log ('video was deleted');
})
.fail (function (err) {
console.log ('video delete problem: ' + JSON.stringify(err));
})
},
// Catch file removal from the editor.
'file.unlink':function ( link) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_file",
// Request params.
data: {
src: link.getAttribute('href')
}
})
.done (function (data) {
console.log ('file was deleted');
})
.fail (function (err) {
console.log ('file delete problem: ' + JSON.stringify(err));
})
}
}
});
})();
</script>
<div class="sample">
<h2>Sample 2: Save to disk (resize on server)</h2>
<form>
<textarea id="edit-resize" name="content"></textarea>
</form>
</div>
<script>
(function() {
var editor2 = new FroalaEditor('#edit-resize', {
imageUploadURL: '/upload_image_resize',
imageUploadParams: {
id: 'my_editor'
},
fileUploadURL: '/upload_file',
fileUploadParams: {
id: 'my_editor'
},
imageManagerLoadURL: '/load_images',
imageManagerDeleteURL: "/delete_image",
imageManagerDeleteMethod: "POST",
events :{
// Catch image removal from the editor.
'image.removed': function ( $img) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_image",
// Request params.
data: {
src: $img.attr('src')
}
})
.done (function (data) {
console.log ('image was deleted');
})
.fail (function (err) {
console.log ('image delete problem: ' + JSON.stringify(err));
})
},
// Catch file removal from the editor.
'file.unlink': function ( link) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_file",
// Request params.
data: {
src: link.getAttribute('href')
}
})
.done (function (data) {
console.log ('file was deleted');
})
.fail (function (err) {
console.log ('file delete problem: ' + JSON.stringify(err));
})
}
}
});
})();
</script>
<div class="sample">
<h2>Sample 3: Save to disk with custom validation: Images must be squares (width == height). Files must not exceed 10M.</h2>
<form>
<textarea id="edit-validation" name="content"></textarea>
</form>
</div>
<script>
(function() {
var editor3 = new FroalaEditor('#edit-validation', {
imageUploadURL: '/upload_image_validation',
imageUploadParams: {
id: 'my_editor'
},
imageUploadParam: 'myImage',
fileUploadURL: '/upload_file_validation',
fileUploadParams: {
id: 'my_editor'
},
fileUploadParam: 'myFile',
fileMaxSize: 1024 * 1024 * 50,
imageManagerLoadURL: '/load_images',
imageManagerDeleteURL: "/delete_image",
imageManagerDeleteMethod: "POST",
events : {
// Catch image removal from the editor.
'image.removed': function ($img) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_image",
// Request params.
data: {
src: $img.attr('src')
}
})
.done (function (data) {
console.log ('image was deleted');
})
.fail (function (err) {
console.log ('image delete problem: ' + JSON.stringify(err));
})
},
// Catch image removal from the editor.
'file.unlink': function (link) {
$.ajax({
// Request method.
method: "POST",
// Request URL.
url: "/delete_file",
// Request params.
data: {
src: link.getAttribute('href')
}
})
.done (function (data) {
console.log ('file was deleted');
})
.fail (function (err) {
console.log ('file delete problem: ' + JSON.stringify(err));
})
}
}
});
})();
</script>
<div class="sample">
<h2>Sample 4: Save to Amazon using signature version 4</h2>
<form>
<textarea id="edit-amazon" name="content"></textarea>
</form>
</div>
<script>
(function() {
$.get( "get_amazon", {})
.done(function( data ) {
new FroalaEditor('#edit-amazon', {
imageUploadToS3: data,
fileUploadToS3: data,
videoUploadToS3: data
})
});
})();
</script>
</body>
</html>