Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I opened a google doc, it seems that the google doc is not a simple text area .... it seems that this is a customize stuff.... is there any library for doing that kind of things?
Most editors use the contentEditable property. Simply setting it on any HTML element enables editing, copy&paste, spell checking, formatting etc. in modern user agents.
However, google docs specifically does not use contentEditable. Instead, they implemented their own rendering engine in JavaScript. Unless you plan a project on the scale of google docs (i.e. you have at least, say, 3 people willing to work full-time on the rendering engine), contentEditable is the way to go.
new Google Docs is totally different for everything else like tinyMCE, ckEditor and similars. Here is an article describing some of the technologies behind it : http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml
quoted from the article: “To get around these problems, the new Google document editor doesn’t use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript,” Jeff Harris, product manager, Google Docs.
It's amazing how there isn't any open source implementation and people are not aware of this.
The short answer is that they implemented every single logic that a graphic text editor would do, in plain javascript (from layout, to rendering, to everything else)
Google Wave pioneered much of what google docs has, though the models are completely different. Start research there, as there is much to learn.
If you are just trying to do something simpler than structured documents, mobwrite, etherpad or one of its forks could suit.
The editor can be tricky and essentially involves building an entire word processor in javascript. Some examples of this are around.
With any kind of editor you have a line or element buffer, which you must mirror onto the realtime api of choice.
This can be done with Google drive's realtime API.
Modification events have to be handled in both directions. Local model changes propagating to the realtime model and vice versa. Modifications to the local model can get rendered as they happen.
Cursors can be handled by having pointers on the source buffer, such as Index Reference.
The server can be implemented in a number of ways, but will require an operational transformation model supporting common structures. Wave protocol's site has an example using an xml model.
Ritzy is a new open source rich text editor that contains a custom javascript surface and layout engine just like Google Docs. Take a look at it's source for some ideas.
It is based on Facebook React and SwarmJS and is primarily intended for embedding into applications to support rich text entry with real-time collaboration.
As far as I know, this is the first open source implementation of this technique. Note that this is pretty new and hasn't seen any real-world testing/usage, so there are some known bugs and likely lots of unknown ones as well.
Disclaimer: I am the author of the above-mentioned project.
If you use the element inspector (Tools>Developer Tools on chrome, or the Firebug extension for Firefox) then you can see what techniques they used to implement it.
How you implement it is the same as anything - break up the tasks into small enough units that you can understand each one, understand how the units act in concert to realise the system, then implement the units and put them together.
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
SITUATION: My company has a massively complex and dynamic IT infrastructure. These systems are far too complex to map and present through a diagram. I am trying to create a centralized website that houses all documentation, for all IT teams, with interactive expandable system diagrams, so that teams can drill-down and view as much, or as little of the system as they need without being overwhelmed.
QUESTION: Using DHTML, is it possible to create an interactive diagram that starts out as a simple square with the system name, then once the users clicks on it, that square disappears and expands to reveal more of the system components? Each component would then be clickable, and the process would continue until the system was completely broken down.
NOTE: I apologize if this is ambiguous. I didn't know how else to describe it. Google continues to pull up incorrect results to all queries. All help is appreciated.
What you are looking for is definitely possible. I believe the search terms you should be looking for is diagramming libraries or graph drawing and flow-charting programming libraries. There are a lot of libraries out there, both commercial and open-source. See this related SO question for a number of options.
From your description, I believe the yFiles for HTML diagramming library should be a good match.
There are two demos available online that show scenarios that seem to match your description:
Live Demo Hierarchic Grouping
Live Demo Collapsible Tree
Since this is a library with a huge API you can easily customize the look and feel as well as the data sources to your own specific requirements.
Disclosure: I work for the company that creates that (commercial) library, however I do not represent my employer here. This is my own post and opinion.
I am not sure if I understood correctly your question. But it seems you are looking for a tree diagram. There is this example in D3.
Yes, it is possible, but there are many options to possible designs, so more specific suggestions will not be definitive. The distribution of concerns between client and server ( who does compute what part of the schematics at what time / upon which user action ) should be a reasonable first design choice. Further criteria comprise visualization complexity, data complexity, data source, frequency of data change, ease of development, available development skills and budget.
Today's user agents and computing power allow to run the whole gamut between client-only and server-only processing (almost that is: basic user input ['mouse clicks'] will of course be processed client-side).
The easiest path will probably be to use a client-side library like D3.js on a precomputed data set as #MárioAreias suggests.
I want to be able to open an Excel sheet using Office Web Viewer, HTML viewing component. (This seems to also be called the "Office Web Apps Viewer".) The viewer component is a really excellent HTML office document rendering engine, but I can find absolutely no documentation online for it. It's even hard to discern what its correct name is. (Does anyone have details on the API?)
I need to be able to load the document and immediately call a JavaScript function to do a search so that the document opens with the search result already highlighted. Even better would be to be able to set the search term in the query string given to the viewer component.
Does anyone know if this is possible and if so, how?
I can say with quite some certainty that there is no such API as the viewer is not intended for such usage. Yeah, I know, not the answer you wished to hear, but then again, that's just the way it is. It's just a viewer, not a component to be used as part of applications.
The quick & dirty solution: Using an extension
One way to achieve what you want is to write an extension that would expose this functionality to you. Of course this would require your users to install this extension, but it is definitely an option and such an extension would be relatively simple to write.
The better solution: PDF.js
Convert your documents to PDF's using some server side solution.
On Linux with OpenOffice.org this could for example look like oowriter -convert-to pdf:writer_pdf_Export doc_file.doc or swriter for LibreOffice.
Present them using Mozilla's cross browser PDF.js library.
Figure out the PDFFindController how to trigger the highlighting. Take a look at this demo and next at this source file. In there they are definitely triggering the highlighting (search for the object I named before), but as it is not directly addressing this question I am not going to figure that one out for you.
We are getting ready to move our app over from Silverlight to HTML5/Javascript. In Silverlight we were using Devforce and Cocktail.
We also relied heavily on Silverlight's dataform for editing records. We had created a generic screen that could take just about any of our entities and make its fields editable.
Breeze has handled the Devforce aspect of our code but we are struggling to find an answer for the dataform. We dont want to create a bunch of different screens just to edit records. We are looking for a way to generate most of the view based off of the entities we receive from Breeze.
Anybody doing this? Anybody have an idea?
For inspiration, you might spelunk the as-yet-undocumented-unreleased Breeze Inspector in the Breeze Samples on GitHub. This app creates HTML "forms" dynamically, choosing controls for each property and laying them out based on its own metadata. It uses some "advanced" techniques involving RequireJs. It's offered "as is"; please don't expect support for it. I think it is simple and clever (in a good sense) and hope to shape it into something publishable.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
With the current state of html5/css3/javascript and the browsers support of it, do you think it is possible to create a fully functional word-processor (or document editor) like Microsoft Word or LibreOffice Writer with > 80% of its features? I'm talking about the rendering and editing engine, I think a server-side component for loading and saving documents to disk is always required because of security, conversion, etc.
Of course I am not talking about HTML-editors which are commonly available (e.g. CKEditor, TinyMCE, etc.) but I compare it with products like DevExpress DXRichEdit, Telerik RichTextBox and TX Text Control. Why would you at this moment still need technologies like Silverlight, ActiveX or Flash to create a webbased word-processor?
There are some initiatives regarding HTML5 document viewers, but besides Google Docs and Zoho Docs (which are limited in features compared to desktop based word-processors, and operate more like advanced HMTL editors) there is little available in regards to webbased word-processors.
Is there a reason there is no HTML5 word-processor yet? What do you think is still missing from the current technology to be able to create a webbased word-processor suitable as replacement for products like MS Word?
No if you think anything more advanced than a letter to your aunt.
HTML WYSIWYG components are horrible mess (contentEditable). You might almost success for one browser, but xplatform stuff (IE) just wont fly.
Google Docs is the best what money can buy today and it is flakey at the best.
However Silverlight or Adobe do not offer anything better.
The best bet is to hope that HTML5 APIs got to the point pure Javascript editor is possible. But they are not yet there.
ConstEdit at http://www.constedit.com may be such a word processor that satisfies your requirements on html5/css3, but not javascript.
It generates documents in the html format. Html5 sectioning elements tags are fully supported. There is an option to generate css stylesheets. It is not web-based. It runs locally on your pc.
You may give it a try. It is free for non-commercial users.
(Please note that I am the author of this software)
I am very interested in this issue, too. I want to be able to take templates and finalize my cover letters and similar format-critical documents via an online word processor.
I detest CKeditor and the other html editors. They are definitely not WYSIWYG.
The best one I've found so far is www.TeamLab.com I have no affiliation with them at all. I think they already recognize the monetary value of their online word processor. They are not giving out their API's and last time I spoke with them they said they will not do so for a number of months - presumably to assess how they want to charge for this valuable WP feature.
I am an attorney who needs to have proper looking letters and documents. I have my own online application, and the online word-processing feature is only one small - but very important - aspect that I want to add to my app for my staff attorneys to have.
I may be wrong but ConstEdit seemed to be just preliminary. If I am wrong, I would very much like to talk to you. I can give you good advice from a User's perspective.
Another group that I think is working on this concept is www.TheFormTool.com They indicated they have a secret project, and I suspect it is this very html5 word processor.
As a user it is my opinion that such a product would be very valuable. I encourage people to pursue this.
Only reliable way to find out is to attempt it yourself, and see if you're blocked by something missing in the tech stack you're using (in this case js/html5/css).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).
Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/
If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}
I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point
Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.
I think paper.js (http://paperjs.org) will get you also pretty close.
You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.
I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.
In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.
You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.
Best bet would be to render them on the server (or use it as an applet) with JGraphT.