GroupDocs.Editor for Java/Javascript/PHP support UI

We’re specifically looking to provide web-editing capabilities to our customers. Like being able to edit MS Office documents directly in a web browser. We need the ability to support doc, Docx, xls, xlsx, ppt, pptx and txt.
Is there a sample code that shows us how to build a basic editor which can be rendered inside a web browser – for the above use case?

@shireeshakalle

Could you please explicitly specify the development environment that you are going to work on (e.g. Java, PHP, .NET)? We’ll then assist you accordingly.
Our on-premises/back-end APIs come with Java and .NET variants only. However, we do offer a Cloud SDK for PHP here.

Thanks for your help.
Our working environment is PHP and java. We’re specifically looking for web-editing capabilities. Like user should be able to view the file and edit the file in the UI and we should be able to save the file. how GroupDocs will be used to edit a Microsoft word document in the browser using the java/PHP application?.

I have already gone through the following link but I’m not getting exactly what I mentioned above .

Unfortunately, the CloudSDK won’t work for us – because we need an on-premise version. Java support is fine. But I do need some sample code as I was asking in my original question. Something that demonstrates how to build a basic editor which can be rendered inside a web browser – for editing Office documents.

1 Like

@shireeshakalle

Thank you for the details. We’ll now brief you about the API and how it works or could be implemented. First of all please note that GroupDocs.Editor for Java is a pure server-side API and has no a client-side component. Hence, in order to edit a document you must use GroupDocs.Editor in collaboration with some 3rd party editor applications (e.g. WYSIWYG editors). You could choose any editor component or software at client side but it must be compatible with HTML documents.
How API works?

  • Loads a document using optional load options
  • Opens document for editing with optional edit options
  • Generates HTML markup with resources and pass this markup to the 3rd party HTML editor
  • End user edits or manipulates the document content and once he finishes editing and submit the edited document, it must be transferred back to the API
  • Then API convert this document/content to output document of desired file format

We have some useful resource for you:

Thank you so much Atir_Tahir.can you please suggest any WYSIWYG editors which your users use mostly?

1 Like

sorry for asking more questions!

GroupDocs.Editor-for-Java-Spring is applicable only for spring boot or it will be applicable for java spring MVC also?

I tried to build a GroupDocs.Editor-for-Java-Spring project after clone using “mvn clean spring-boot:run” command but it failed and gave the following error

[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:npm (build client) on project editor-spring: Failed to run task: ‘npm run build’ failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1)

can you please help me with how to work on this project?

@shireeshakalle

You could use any WYSIWYG editor like TinyMCE, CKEditor or Summernote. API works with all of them.

This particular project works with Spring boot. However, we already mentioned that the API is server-sided. Hence, you could implement it in any Java project irrespective of platform or framework dependencies. The minimum requirements to get started are mentioned here.

We couldn’t reproduce this issue at our end. Have a look at this screencast. Maybe check your internet connection, make sure all npm missing packages are pulled successfully.

Thank you so much for your help

1 Like

@shireeshakalle

You’re welcome.

I’m able to build and I’m able to run the application edit and save also I have tried thanks for this help.

I have gone through a few example codes like how to load how to edit that part is ok. But I’m not understanding the integration with the editor. I just need some(technical) code level explanation from you. if I get the knowledge about the integration flow and working flow at the code level then only I can go to the next level.

if we have a license means we just need to call the API which you have mentioned?.

how it works with other files like xls,xlsx,pdf,ppt i couldn’t upload those files. can you please let me know?

if possible can we have a call or complete demo in detail?

1 Like

@shireeshakalle

You’re welcome.

Please have a look at this screenshot.jpg (20.1 KB).

Integration Flow
This is the how you edit a document:

string inputFilePath = "C:\\input_path\\document.docx"; //path to some document
Editor editor = new Editor(inputFilePath, delegate { return new WordProcessingLoadOptions(); });
EditableDocument openedDocument = editor.Edit();//with default edit options

WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
editOptions.EnableLanguageInformation = true;
editOptions.EnablePagination = true;

EditableDocument anotherOpenedDocument = editor.Edit(editOptions);

When EditableDocument instance is ready, it can emit HTML-markup, CSS-markup and other resources in different forms for passing them to the client-side WYSIWYG HTML-editor or any other application, that can edit HTML documents.

EditableDocument document = editor.Edit();
string bodyContent = document.GetBodyContent();
List<IImageResource> onlyImages = document.Images;
List<IHtmlResource> allResourcesTogether = document.AllResources;

Learn more on Getting HTML markup in different forms. Later, bodyContent for example, could be forwarded to the HTML-editor (e.g. CKEditor or TinyMCE) and user can do editing at UI level and save back.

Yes, you will be working with various API (back-end) features/methods (e.g. Load/Edit/Save). Please refer to the screenshot shared above.

We’ve added a request here on GitHub to update/enhance the demo project so that other (supported) file formatted documents could be loaded.

Thank you @Atir_Tahir

In this sample project when I run the application it pointing to WYSIWYG HTML-editor. but actually, do I need to do all these code changes like to send HTML body to HTML WYSIWYG editors on our own? or you will provide a complete setup I just have to use these?

if we have to do it on our own, can you please send me a few examples of how to send HTML markup to the browser (client)?

@shireeshakalle

We’re working on your request. Your investigation ticket ID is EDITORJAVA-308. You’ll be notified in case of any progress update.

Thank you @Atir_Tahir

if you don’t mind may I know an estimated time like when can I get it?

@shireeshakalle

All free support requests are handled on first come first served basis. We cannot share any ETA at the moment. However, you’ll be notified as there’s any progress update.

OK @Atir_Tahir
we will be waiting for your response. Thank you,

@shireeshakalle

We’ll notify you in case of any update.

is there any update @Atir_Tahir?

@shireeshakalle

We’ve some useful information below.
API basically obtains an input document of some format and returns an EditableDocument instance. From this instance you can generate HTML and CSS markup using mentioned getContent() method as well as others, like getBodyContent(), getCssContent() and so on. But GroupDocs.Editor does not transmit this content from the server-side to a client-side, because it’s an API, not a framework. In fact, GroupDocs.Editor could be used in non-web-applications, which have no client and server sides at all. For example, it can be used in desktop apps with GUI or console interface.
Sending data from the server-side to client-side in web-applications depends on your use-case or business logic and used framework. For example, in Spring MVC this should be done like described here.
But there are a lot of other Java web frameworks and all have their own way of handling this scenario.