ODT Document Editor In Node.js (Mean Stack JS)
Hello my fellow coders ... If I would have said you that , you can build a Open Office Document Editor Web application with an Content Management System in place , using only JavaScript as development language maybe a couple of years (or more) back, you wont be wrong in thinking I was crazy .
But I am not !!! OR Maybe we can debate about that later ...
Here's a quick look at the Document Editor created only using JavaScript ... YES SIR ... only JavaScript
There are 2 important halves involved in creating your own document editor which can serve document and edit the document .
A front-end(HTML-JAVASCRIPT) which makes the view and content which will be visible in your browsers and a back-end(JAVASCRIPT ) which will serve or provide files to you front-end/browser.
And yes ... as you can, I am keeping to my words by proudly writing JAVASCRIPT in all Caps in the back-end Technology.
Here's the Git Repo If you don't have the patients and wanna try it yourself... have Fun!!!
THE FRONT-END :
STEP 1 - Create a directory or folder which will be your project base directory .Name it whatever you want . I will name it doc-editor for simplicity.Whew! the hard part done ... naming stuff ;)
STEP 2 : In your base directory create a folder(we name it 'app'), where all the html,styles and scripts and images will be stored .This will be your public directory .
STEP 3 : Create an index.html file and include the Document Editor JavaScript libraries in scripts folder . This Document Editor library contains also webodf.js which is a dependency of Document Editor Library .
This is how you directory structure should look by now :
doc-editor
--/app
`-- index.html
`-- scripts/
`-- wodotexteditor-0.5.9
`-- main.js
`-- styles/
`-- images/
STEP 4 : Paste the contents from this url in the index.html .
THE BACK-END:
STEP1 : First Create an index.js file(name it whatever you want)in our application directory,then initialize node application using *node init*.
We will have following folder structure : -
- ./ document-editor
- ../app (our html code and libraries)
- ../index.js
- ../package.json
- ../And some other auto-generated files.
STEP 2: Include all the modules necessary.We are going to use Express,Multer and
other utilility libraries or npm modules.
var express = require("express");
var multer = require('multer'); //for file handling
var util = require('util');
var app = express(); // init express app
STEP 3: Configure Routes and Html files to be served on user request to you server.
app.use(express.static('app')); // use this as resource directory
//APP ROUTING URL => FUNCTIONS
app.get('/', function (req, res) {
res.sendFile(__dirname + "/app/index.html");
});
// this means when we get a request on 'myAppContext/' url provide
index.html
STEP 4: Start the Server
//START THE SERVER
app.listen(3000, function () {
console.log("Listening on port 3000");
});
Note : Make sure you have node.js environment installed on your system before you start.
Now Finally after we have done all the above things,we will go into our root directory and run node index command.... and that's it folks.
Just hit https://localhost:3000/ and you will see a workable webodf editor on your local browser which can open and edit odt files .
I hope this helps to get started with node.js and webodf. Here is the demo for a full application with open/edit and save features using webodf and node.js.
Thanks :)
[1]: https://github.com/kogmbh/Wodo.TextEditor_release
[2]:https://github.com/kogmbh/Wodo.TextEditor_release/blob/master/texteditor.html