Giter VIP home page Giter VIP logo

wysiwyg-editor-node-sdk's Introduction

Froala WYSIWYG Editor Node.JS SDK

npm npm npm

Easing the Froala WYSIWYG HTML Editor server side integration in Node.JS projects.

Prerequisite

  1. ImageMagick must be installed.

Installation

  1. Clone this repo or download the zip.

  2. Run npm install.

  3. (Optional) Run bower install to install the editor JS.

  4. Load lib directory in your project and import it: var FroalaEditor = require('path/to/lib/froalaEditor.js');

  5. To run examples:

  • npm start to start a nodejs server form examples directory at http://localhost:3000/

Import lib

var FroalaEditor = require('path/to/lib/froalaEditor.js');

Documentation

Help

License

The Froala WYSIWYG Editor Node.JS SDK is licensed under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

Froala Editor has 3 different licenses for commercial use. For details please see License Agreement.

wysiwyg-editor-node-sdk's People

Contributors

dheerajaccolite avatar dianaprajescu avatar florinpopescu avatar froala-travis-bot avatar harasunu-narayan avatar jiteshgupta1995 avatar kapil2704 avatar kumarnagaraj1996 avatar sharma-dark-knight avatar stefanneculai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wysiwyg-editor-node-sdk's Issues

image upload callback get request failed

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

Replace unsupported busboy version with fastify fork

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

Issue With The Documentation : https://froala.com/wysiwyg-editor/docs/server/nodejs/image-upload/

Image Upload Handler Have Issues

// 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;

UnhandledPromiseRejectionWarning: ReferenceError: Element is not defined

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.