froala / wysiwyg-editor-node-sdk Goto Github PK
View Code? Open in Web Editor NEWNode.JS SDK to ease the integration of Froala WYSIWYG Editor on server side.
Home Page: https://www.froala.com/wysiwyg-editor
License: MIT License
Node.JS SDK to ease the integration of Froala WYSIWYG Editor on server side.
Home Page: https://www.froala.com/wysiwyg-editor
License: MIT License
"scripts": {
"start": "node ./examples/server.js",
"postinstall": "bower install"
},
Bower install crashes on elastic beanstalk.
just updaded and i cannot get the server to start anymore ... did not manage to fix the error below
"froala-editor": "^3.0.0",
"wysiwyg-editor-node-sdk": "^3.0.0-beta.1",
var FroalaEditor = require("wysiwyg-editor-node-sdk/lib/froalaEditor.js");
(node:5539) UnhandledPromiseRejectionWarning: ReferenceError: Element is not defined
at /node_modules/froala-editor/js/froala_editor.min.js:7:414
at /node_modules/froala-editor/js/froala_editor.min.js:7:84
at Object.<anonymous> (/node_modules/froala-editor/js/froala_editor.min.js:7:155)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Module._compile (/node_modules/source-map-support/source-map-support.js:521:25)
at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Object.nodeDevHook [as .js] (/node_modules/ts-node-dev/lib/hook.js:61:7)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
(node:5539) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:5539) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
rezise
Hi,
we forked busboy and fixed two critical bugs in the package, which could cause the node-process to crash or to hang. We also improved the performance and added some new features. It does not have breaking changes so it is a drop-in-replacement for busboy. It has a code coverage of about 95%.
https://github.com/fastify/busboy/blob/master/CHANGELOG.md
https://github.com/fastify/busboy
https://www.npmjs.com/package/@fastify/busboy
for tracking reasons:
fastify/busboy#68
From npm audit:
High Prototype Pollution
Package merge
Patched in >=2.1.1
Dependency of wysiwyg-editor-node-sdk
Path wysiwyg-editor-node-sdk > merge
More info https://npmjs.com/advisories/1666
// File POST handler.
app.post("/file_upload", function (req, res) {
upload_file(req, function(err, data) {
if (err) {
return res.status(404).end(JSON.stringify(err));
}
res.send(data);
});
});
// Image POST handler.
app.post("/image_upload", function (req, res) {
upload_image(req, function(err, data) {
if (err) {
return res.status(404).end(JSON.stringify(err));
}
res.send(data);
});
});
// Create folder for uploading files.
var filesDir = path.join(path.dirname(require.main.filename), "uploads");
if (!fs.existsSync(filesDir)){
fs.mkdirSync(filesDir);
}
// Init server.
app.listen(3000, function () {
console.log("Example app listening on port 3000!");
});
image_upload.js file will do the upload part. It has basic image format validations this can be easily extended.
The uploads directory must be set to a valid location before any uploads are made. The path can be any folder that is accessible and write available.
After processing the uploaded image, if it passes the validation, the server will respond with a JSON object containing a link to the uploaded file.
E.g.: {"link":"http://server_address/uploads/name_of_file"}
var Busboy = require("busboy");
var path = require("path");
var fs = require("fs");
var sha1 = require("sha1");
// Gets a filename extension.
function getExtension(filename) {
return filename.split(".").pop();
}
// Test if a image is valid based on its extension and mime type.
function isImageValid(filename, mimetype) {
var allowedExts = ["gif", "jpeg", "jpg", "png", "svg", "blob"];
var allowedMimeTypes = ["image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml"];
// Get image extension.
var extension = getExtension(filename);
return allowedExts.indexOf(extension.toLowerCase()) != -1 &&
allowedMimeTypes.indexOf(mimetype) != -1;
}
function upload (req, callback) {
// The route on which the image is saved.
var fileRoute = "/uploads/";
// Server side file path on which the image is saved.
var saveToPath = null;
// Flag to tell if a stream had an error.
var hadStreamError = null;
// Used for sending response.
var link = null;
// Stream error handler.
function handleStreamError(error) {
// Do not enter twice in here.
if (hadStreamError) {
return;
}
hadStreamError = error;
// Cleanup: delete the saved path.
if (saveToPath) {
return fs.unlink(saveToPath, function (err) {
return callback(error);
});
}
return callback(error);
}
// Instantiate Busboy.
try {
var busboy = new Busboy({ headers: req.headers });
} catch(e) {
return callback(e);
}
// Handle file arrival.
busboy.on("file", function(fieldname, file, filename, encoding, mimetype) {
// Check fieldname:
if ("file" != fieldname) {
// Stop receiving from this stream.
file.resume();
return callback("Fieldname is not correct. It must be "file".");
}
// Generate link.
var randomName = sha1(new Date().getTime()) + "." + getExtension(filename);
link = fileRoute + randomName;
// Generate path where the file will be saved.
var appDir = path.dirname(require.main.filename);
saveToPath = path.join(appDir, link);
// Pipe reader stream (file from client) into writer stream (file from disk).
file.on("error", handleStreamError);
// Create stream writer to save to file to disk.
var diskWriterStream = fs.createWriteStream(saveToPath);
diskWriterStream.on("error", handleStreamError);
// Validate image after it is successfully saved to disk.
diskWriterStream.on("finish", function() {
// Check if image is valid
var status = isImageValid(saveToPath, mimetype);
if (!status) {
return handleStreamError("File does not meet the validation.");
}
return callback(null, {link: link});
});
// Save image to disk.
file.pipe(diskWriterStream);
});
// Handle file upload termination.
busboy.on("error", handleStreamError);
req.on("error", handleStreamError);
// Pipe reader stream into writer stream.
return req.pipe(busboy);
}
module.exports = upload;
Hey there,
right now expiration time for S3 signature is hard-coded to 5 min here https://github.com/froala/wysiwyg-editor-node-sdk/blob/master/lib/s3.js#L56
What do you think about making this option configurable? I'd like to raise this time from 5 min to 1 hour. Are you open to such changes in the SDK?
when i'm calling post request /upload_image
images uploaded in server but it not displaying in editor.
router.post('/upload_image', function (req, res) {
console.log(req.body)
FroalaEditor.Image.upload(req, '/../public/uploads/', function(err, data) {
if (err) {
return res.send(JSON.stringify(err));
}
res.send(data);
});
});
GET /public/uploads/3c1d2db8265758b6954701b3dfb9a8812c4ece3e.png 404 5ms - 2.53kb
404 error
Give me any Idea?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.