We already explained that GroupDocs.Editor for .NET is a UI-Agnostic API, you can use any WYSIWYG HTML editor at front end (paid or free).
We already shared file saving code with you that works perfectly fine.
We have plans to develop more demo projects but we do not have any ETA at the moment.
Please take a look at the output.zip (435.7 KB) we are getting using the same code. A new text line is also added at the bottom of the file through the editor “multiple images ahead”. Please reevaluate the save method we shared earlier with you.
and I want to add one more thing when I open the document in Editor and the document contains a header the alignment of the document gets affected, sharing the file and screenshot for your reference.
public IActionResult Index()
{
// Set the license for the Conholdate.Total.Product.Family library
License lic = new License();
lic.SetLicense(@"D:\\GD Licenses\\Conholdate.Total.Product.Family.lic");
// Specify the input file path for the Word document
string inputFilePath = @"D:\\GroupdocsEditor.docx";
// Define the resource directory where the extracted resources will be saved
string resourceDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
// Ensure the resource directory exists
Directory.CreateDirectory(resourceDirectory);
// Initialize the editor with the input file path
Editor editor = new Editor(inputFilePath);
// Set the Word processing edit options
WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
editOptions.UseInlineStyles = true;
// Edit the document and get the editable document instance
EditableDocument beforeEdit = editor.Edit(editOptions);
// Extract various resources from the editable document
List<IImageResource> images = beforeEdit.Images;
List<FontResourceBase> fonts = beforeEdit.Fonts;
List<CssText> stylesheets = beforeEdit.Css;
List<Mp3Audio> audiofiles = beforeEdit.Audio;
// Get the HTML content of the editable document
string htmlContent = beforeEdit.GetContent();
// Save the extracted fonts, stylesheets, and audio files to the resource directory
foreach (FontResourceBase oneFont in fonts)
{
oneFont.Save(Path.Combine(resourceDirectory, oneFont.FilenameWithExtension));
}
foreach (CssText oneStylesheet in stylesheets)
{
oneStylesheet.Save(Path.Combine(resourceDirectory, oneStylesheet.FilenameWithExtension));
}
foreach (Mp3Audio oneMp3 in audiofiles)
{
oneMp3.Save(Path.Combine(resourceDirectory, oneMp3.FilenameWithExtension));
}
// Update the HTML content to reference the saved images
htmlContent = beforeEdit.GetContent();
foreach (var image in images)
{
string imageFileName = Path.GetFileName(image.FilenameWithExtension);
string imageFilePath = Path.Combine(resourceDirectory, imageFileName);
// Save the image to the resource directory
using (var fileStream = new FileStream(imageFilePath, FileMode.Create))
{
using (var imageStream = image.ByteContent)
{
imageStream.CopyTo(fileStream);
}
}
// Update the HTML content to reference the correct image path
htmlContent = htmlContent.Replace(image.FilenameWithExtension, $"/images/{imageFileName}");
}
// Optionally, save the updated HTML content to a "debug.html" file for debugging purposes
System.IO.File.WriteAllText(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "debug.html"), htmlContent);
// Pass the updated HTML content to the view using ViewBag
ViewBag.HtmlContent = htmlContent;
// Pass the input file path to the view using TempData
TempData["InputFilePath"] = inputFilePath;
return View();
}
We’d again recommend you to please go through the documentation and existing UI applications.
Yes the image shared by you is much better than what we are achieving but still not looking like the original file.
NOTE: We had fixed the saving issue by changing from $(‘#documentContent’).html() to $(‘#documentContent’).text() before doing the api call, but I want to know one more thing
Below is the code to load the word file →
SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
Editor editor = new Editor(request.FileUploadPath);
WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
editOptions.UseInlineStyles = true;
EditableDocument readyToEdit = editor.Edit(editOptions);
List<IImageResource> images = readyToEdit.Images;
// Save extracted images and update HTML content
string htmlContent = readyToEdit.GetContent();
foreach (var image in images)
{
string imageFileName = Path.GetFileName(image.FilenameWithExtension);
string imageFilePath = Path.Combine(request.ResourceDirectory, imageFileName);
// Save image to the resource directory
using (var fileStream = new FileStream(imageFilePath, FileMode.Create))
{
using (var imageStream = image.ByteContent)
{
await imageStream.CopyToAsync(fileStream);
}
}
htmlContent = htmlContent.Replace(image.FilenameWithExtension, request.AppDirectory + "\\" + imageFileName);
}
string cssContent = string.Join("\n", readyToEdit.GetCssContent());
sp.Ref1 = htmlContent;
sp.Ref2 = cssContent;
return sp;
and my saveFile Code
SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
string editedHtmlContent = request.EditorData;
string inputFilePath = Path.Combine(request.StoragePath, request.GUID);
string guid = Guid.NewGuid().ToString();
string extension = Path.GetExtension(request.GUID);
string outputFilePath = Path.Combine(request.StoragePath, guid + "." + extension);
// Create an EditableDocument from the edited HTML content
EditableDocument afterEdit = EditableDocument.FromMarkup($"<body>{editedHtmlContent}</body>", null);
WordProcessingSaveOptions saveOptions = new WordProcessingSaveOptions();
// Use the input file path to create a new Editor instance and save the document
using (Editor editor = new Editor(inputFilePath))
{
editor.Save(afterEdit, outputFilePath, saveOptions);
}
sp = new SPResponse() { ReturnStatus = "0", Ref1 = guid };
return sp;
can you please help me with how to also save images with the document as the images are not getting save while saving the document.