CODEWITHSUNDEEP
javascript
Umair Ayub
Umair Ayub

Reputation: 21281

Use WebODF editor for localhost

How to add WebODF to site on localhost?

I tried to save the webpage and opened in the browser but it looses formatting and everything is messed up.

Upvotes: 0

Views: 2813

Answers (2)

peitschie
peitschie

Reputation: 16

The ease of creating and deploying a simple WebODF editor has been drastically improved in the 0.5 release, and no longer requires downloading and compiling from source.

Information about the new Wodo editor component can be found at: http://webodf.org/news/2014-06-30.html

Usage instructions are included in the downloadable archive, or can be viewed online at: https://github.com/kogmbh/WebODF/blob/master/programs/editor/HOWTO-wodotexteditor.md

Upvotes: 0

user3095977
user3095977

Reputation:

I got this from the link you gave actually:

How to get WebODF Go to WebODF.org and see if there is already a version meeting your needs

Search for it directly in your app store

Or download the sourcecode of WebODF and create your own application with it.


Here's the link to the source code: https://github.com/kogmbh/WebODF/archive/master.zip

Update

Well, you're lucky, since I use a Linux distribution that is based on Ubuntu. Here are the steps to install:

Creating webodf.js
webodf.js is compiled by using the closure compiler. This compiler compacts all JavaScript files, so that they are smaller and execute faster. CMake is used to setup the buildsystem, so webodf.js can be created like:

sudo apt-get install cmake cmake-gui
sudo apt-get install git
git clone https://github.com/kogmbh/WebODF.git webodf
mkdir build
cd build
cmake ../webodf
make webodf.js-target These commands do not need the installation of any program
You can copy the commands above (in italic), and paste them in the Terminal (CTRL+ALT+T), if everything runs successfully, you should find the folder build in your home directory. Open it up, you should find the folder webodf... Again, open it up, there, you should find webodf.js file or something like that... Put it in the same directory as your HTML file and at this to your <head> tag:

<script src = "webodf.js" type="text/javascript" charset="utf-8"></script>

You can then use WebODF as described here.

Update 2

I believe you only need the following programs : git and cmake, anyway, if you need any other, just install it, there are many instructions online.
To load a file use this JavaScript:

var odfelement = document.getElementById("odf"); 
/*
you should have a container with the id "odf"
For exmaple a <div>
*/
odfcanvas = new odf.OdfCanvas(odfelement);
odfcanvas.load("myfile.docx"); // the filename (don't forget the extension)

And here is a container for our document, here we use a div with the name "odf"... Using a container isn't essential, for example the odfelement variable in JavaScript could have just been our body like : var odfelement = document.getElementsByTagName('body')[0];, but results in cleaner, bug-free code... In addition, I only assume that you could do that, so keep on the safe side and use the former way.

<div id="odf"></div>

Note

Don't forget to add webodf's script like I said before:

<script src="webodf.js" type="text/javascript" charset="utf-8"></script>

Upvotes: 1

Related Questions