Is there a document editor (doc, docx) available in javascript
Can anyone suggest me any library in javascript(client end) Document Editor where user can view and edit documents like doc, docx, odf etc.
1 Reply
1
Your best bet is to search for converters and then edit the converted content.
I've been looking for a working solution for a couple of weeks now and the best I've found so far is docx2html.
Depending on your development platform, you can also use Google's "ONLYOFFICE Document Server Community Edition". They have page editors for Word, Excel and Powerpoint - but they are asp. This is an open platform source code and is available on Github. Might be worth a look though.
Is it possible to convert doc/docx to html using jquery/javascript?
I need to convert doc/docx to html. I have files stored in Amazon s3. I need to view & edit it in the browser. Right now, I'm using Apache POI for...
Generating docx documents from docx javascript template
I'm looking for a library in javascript that can generate docx documents from a docx template and can replace tags with their values and replace images with other images I found the name of the library...
how to judge whether a file is doc or docx in POI
The title may be a little confusing. The simplest method should be based on the extension name just like: // is represents the InputStream if (filePath.endsWith(doc)) ( WordExtractor ex = new...
doc or docx: is there a safeway to identify type from "requests" in python3?
1) How can I differentiate between doc and docx files from requests? a) for example, if I have url="https://www.iadb.org/Document.cfm?id=36943997" r = requests.get(url,timeout=15)...
Import doc and docx files into .Net and C#
I write text editor and I want to add the ability to import .doc and .docx files. I know I can use OLE Automation, but if I use a recent OLE library it won't...
Editing documents (DOC, DOCX, RTF, TXT) in Webforms
I'm developing a web application using asp.net 3.5. This application has many documents like .doc, .docx, .rtf, .pdf, .txt, etc... and sometimes usar needs to edit these documents. IN...
Convert DOC/DOCX to semantic HTML
I would like to convert doc/docx documents to semantic HTML. Some wishes/requirements: Semantic HTML such that the headings in the document are , etc., tables -...
Golang packages to convert doc to docx and docx to pdf?
I'm writing a web application in Golang in which the user can upload a doc or docx file. Some of the contents of the file will be changed according to the predefined format. Later the user...
Load a Rich Word document into RichText editor telerik editor
I have some form in which I upload some word document and save it to DB. I have to do some marking on these documents later. Currently I haven't found anything for...
Convert doc file to docx format
I converted the docx file to html since it is in Zip format. but I need to convert doc files too. Is there a way to change DOC file to docx using code(prefer java). Please...
A code editor is a handy tool for every programmer. And everyone chooses for themselves: some value functionality, some value mobility, for others the main thing is design and convenience. Some people even like to write code in Notepad, but it's like trying to build a house with a hammer.
JavaScript is a powerful and capricious language. On the one hand, there are many frameworks and libraries, on the other hand, not the simplest syntax and dangers associated with “dynamics”. Therefore, it is important to choose an editor to work with it. The right choice will provide you with clean code, high development speed, a minimum of errors and pleasure from work. Choosing one of the hundreds of existing editors can take a lot of time, so we've done some of the work for you. Here are the 5 best.
WebStormWebStorm from JetBrains is wonderful in both its forms: as an IDE it supports working with version control systems, allows you to remotely deploy code, and as an editor - standard amenities such as syntax highlighting, autocompletion, navigation.
Advantages:
- LiveEdit - viewing changes made to the code without having to save it;
- interaction with frameworks, such as React, Angular, Meteor;
- more than a hundred built-in tests to detect errors;
- integration with Mocha, Protractor, Jest, Karma for unit tests;
- full-scale debugger for debugging code on the server and client sides;
- navigation for simultaneous work with several files;
- code completion, syntax highlighting.
Flaws:
- costs $129 for the first year of operation;
- For beginner coders the functionality is redundant.
A fork of the Visual Studio IDE aimed at working with code. It is easy to learn, easy to use, and at the same time functional.
Advantages:
- contextual completion of both syntax and used variables, modules, functions, etc.;
- debugger with breakpoints, call stack, interactive console;
- support for snippets and templates;
- Git integration;
- convenient and simple interface;
- free editor.
Flaws:
- few plugins.
A convenient and time-tested cross-platform editor, with a customizable interface and the ability to perform trivial actions using hotkeys.
Advantages:
- Hotkeys;
- code navigation in the form of a mini-map;
- ability to change the visual theme;
- snippets support;
- highlighting, autocompletion of variables and syntax;
- multiple editing thanks to the use of pointers;
- build system support;
- syntax checking as you type;
- autosave.
Flaws:
- full version costs $70;
- lack of a code analyzer for placing links.
Appeared in 2015, a code editor from Git, copying the design of Sublime Text and wrapped in Chromium.
Advantages:
- more than 50 open modules;
- convenient and pleasant interface;
- free;
- autocompletion and code highlighting;
- package manager, of which there are already more than 3.5 thousand;
- flexible settings for the editor, plug-in packages, and interface themes;
- editing and navigation using hotkeys.
Flaws:
- low productivity;
- empty set "out of the box".
In 2014, Brackets scared off programmers with bugs and shortcomings, but now it is gradually regaining trust with new high-quality functionality.
Advantages:
- rich equipment “out of the box”;
- Live Preview mode - preview of edits in the browser in real time;
- package manager;
- displaying the images and colors used in the code;
- autocompletion and syntax highlighting;
- code analyzer;
- free.
Flaws:
- strict focus on the web and HTML+CSS+JavaScript;
- slow development;
- slow performance due to preview functions.
I have successfully made code to display a PDF file in the browser instead of the "open/save" dialog box. Now I'm stuck trying to display Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome, etc.
can anyone help? I always get an "open/save" dialog when displaying the word doc in the browser. I want to implement this functionality using JavaScript.
6 answershowever, if you prefer to have native support, in most if not all browsers, I would recommend resaving .doc/.docx as a PDF; they can also be independently rendered using Mozilla's PDF.js.
Brandon's and fatbotdesigns' answers are both correct, but by implementing Google Docs Preview we found several .docx files that could not be processed by Google. Switched to MS Office online preview and it works like a charm.
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc"
It seems there are some js libraries that can handle .docx (no .doc) to convert html on the client side (in a specific order):
https://github.com/lalalic/docx2html - docx to html, most elements are supported
https://github.com/mwilliamson/mammoth.js - supports headings, lists, tables, footnotes, endnotes, images and box text!--1-->
https://www.npmjs.com/package/docx2html - Convert HTML documents to DOCX in the browser
https://github.com/artburkart/docx2html - apparently works in the browser
Note: If you are looking for The best way convert the doc/docx file on the client side then probably the answer No need. If you really need to do it, do it. server side i.e. with libreoffice in headless mode, apache-poi or any other library is best for you.
ViewerJS is useful for viewing/embedding openoffice format like odt,odp,ods as well as pdf.
to embed openoffice/pdf document
/ViewerJS/ is the ViewerJS path
#../demo/ohm2013 - add the path to your file
This will remove any runtime dependencies on Google and Microsoft services (eg if there were any, or you were limited to them).
It also has the advantage that you can expand to other file types if you wanted (PPTX, XLS, DOC, etc.)
Surely, you have come across visual editors many times, which allow you to quite conveniently shape the appearance of pages or some messages, for example, on a forum. And not with BB codes, but immediately getting a specific result. There are quite a lot of these editors on the Internet. One of the most popular is TinyMCE, however, I am a supporter of my own scripts and believe that for each task there should be its own solution, and not a universal one. Therefore, in this article I will tell you how to create a visual editor in JavaScript.
Here's some fairly well-commented code:
// Display edit buttons
document.write("");
document.write("");
document.write("
");
document.write(""); // Add an iframe
/* Depending on the browser, we get access to the created frame */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* Create the code for an empty HTML page */
iHTML = "";
iDoc.open(); // Open the frame
iDoc.write(iHTML); // Add the written code to the frame
iDoc.close(); // Close the frame
iDoc.designMode = "on"; // Enable frame editing mode
/* Functions to set appearance selected text
Full set of possible commands: http://javascript.itsoft.ru/execcom/execCommands.html */
function setBold() (
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() (
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function save() (
/* Saving the HTML code in the hidden field so that later you can pass the resulting HTML code to the script handler */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}
At first glance, the code appears to be very complex. And so it is, but if you look at it based on its basic elements, then there is nothing complicated. There is a regular form and a hidden field, where the HTML code generated in the editor is saved. The editor itself is a regular frame, that is, a regular HTML page in which we can write text (designMode = "on"). And various formatting is created using the execCommand() method, which executes the command specified in the parameter. And I think it won’t be difficult for you to create new buttons and attach similar handlers to them.
There is nothing superfluous in this script, only the most important and basic, and you can use it as a basis for creating your own visual editor in JavaScript, in which there will be nothing superfluous, but only what you need.
You can write JavaScript code in a regular Notepad - just save the result with the .js extension, and it will not only connect to the site, but even work. However, using such a limited editor will greatly slow down development. Therefore, it is better to take something specialized. There are several main criteria by which you need to choose an editor for working with JavaScript code.
First, we need syntax highlighting: names, operators and Special symbols should be displayed differently so that the code can be read quickly.
Syntax highlighting in Notepad++
Secondly, you need autocompletion: when you enter the name of a function or variable, the editor should offer several options for the commands you are likely to enter. It is advisable that it also shows hints about the selected component - for example, required arguments, variable type, short description and so on.
Autocompletion in Notepad++
Thirdly, we need the ability to hide individual blocks. When working on large projects, this is useful because you don’t have to scroll through huge pieces of code to find what you need.
Hiding blocks in Visual Studio Code
It is desirable that errors are highlighted - then you can immediately notice and correct them:
Displaying errors in Visual Studio Code
Good bonuses will be the ability to work with several files in one window, a project manager, selection of themes, installation of plugins, and so on.
There are a large number of editors that meet these requirements and are suitable for working with JavaScript. What to write code on is a personal matter for everyone, but many people have problems choosing the right program, so we have compiled a list of 6 good tools.
Notepad++Notepad++ is a simple and convenient open source editor. It has syntax highlighting for several languages, including JS, automatic formatting and autocompletion. There is navigation in the form of tabs, file manager and code cards.
You can work with different encodings, connect compilers, use plugins and other useful functions. For example, adding QuickText will improve the built-in autocompletion.
Notepad++ is regularly updated, so bugs are quickly fixed and new features are added. Unfortunately, it only works on Windows.
The Vim editor has long been a classic. Many people say that it is difficult to understand, but if you devote enough time to it, you will no longer want to use anything else.
In addition to meeting all of our chosen criteria, Vim is also fully customizable, so you can:
- install plugins;
- change topics;
- assign hotkeys and so on.
Vim is completely free and works on all platforms, from Windows, MacOS and Linux to MS DOS and OS/2.
Microsoft Visual StudioMicrosoft Visual Studio is an IDE that has everything you need to work with JS. In addition to the usual syntax highlighting and autocompletion, you can also use a debugger and create Unit tests.
However, the program weighs quite a lot and loads the system heavily, so it is not very suitable for working on weak computers.
A monthly subscription can cost anywhere from $45 to $250 per month, but there are also free version for beginner developers and those who create open source programs. The IDE is available for Windows and MacOS, and can be installed on Linux using Wine.
Visual Studio Code is a lightweight (~170 MB vs. 30 GB), cross-platform and free version of Visual Studio. This editor comes pre-installed with support for JavaScript, TypeScript and Node.JS.
Extensions for other languages can be downloaded directly from Visual Studio Code.
Built-in debugger and Git commands for working with the GitHub version control system allow you to speed up testing and publishing applications.
Sublime TextSublime Text is a simple cross-platform editor. Its interface is customizable, and you can perform some actions using hotkeys.
It also has support for snippets, autocompletion, syntax highlighting and navigation. Cool bonus - autosave. However, it is more needed by beginners - after all, professional programmers over the years of work develop the habit of saving after entering each command.
The main disadvantage of Sublime Text is that the full version costs $80 (the license is issued for one user, who can use the editor on any computer). Otherwise it fits well
JS developers.
