Images are not loading when I am using Groupdocs Editor for word document with TinyMCE
sharing my code, Document as well as screenshot for your reference.
public ActionResult Index()
{
License lic = new License();
lic.SetLicense(@"E:\\Ibrahim\\DocProDMSUpdatedCopySoln\\WebApp\\GroupDocs.Total.lic");
string inputFilePath = @"D:\\Download\\GroupdocsEditor.docx"; //path to some document
Editor editor = new Editor(inputFilePath);
WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
EditableDocument readyToEdit = editor.Edit(editOptions);
string htmlContent = readyToEdit.GetBodyContent();
string cssContent = string.Join("\n", readyToEdit.GetCssContent());
ViewBag.HtmlContent = htmlContent;
ViewBag.CssContent = cssContent;
TempData["InputFilePath"] = inputFilePath;
return View();
}
Front end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Editor</title>
</head>
<body>
@{ ViewBag.Title = "Document Editor"; }
<h2>Document Editor</h2>
<div>
<textarea id="documentContent">@Html.Raw(ViewBag.HtmlContent)</textarea>
</div>
<script src="https://cdn.tiny.cloud/1/MyApi/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#documentContent',
height: 500,
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
toolbar_mode: 'floating',
toolbar: 'undo redo | formatselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_style: `@Html.Raw(ViewBag.CssContent)`
});
</script>
</body>
</html>
word file
GroupdocsEditor.docx (471.2 KB)
screenshot
image.png (220.8 KB)
@Niteen_Jadhav
Please take a look at this article and update your Index method as follows:
public IActionResult Index()
{
License lic = new License();
lic.SetLicense(@"D:\\GD Licenses\\Conholdate.Total.Product.Family.lic");
string inputFilePath = @"D:\\document.pdf"; // Path to the PDF document
// Define the resource directory
string resourceDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
// Ensure the resource directory exists
Directory.CreateDirectory(resourceDirectory);
// Initialize the editor
Editor editor = new Editor(inputFilePath);
// Set the PDF edit options
PdfEditOptions editOptions = new PdfEditOptions();
// Create EditableDocument instance
EditableDocument beforeEdit = editor.Edit(editOptions);
// Extract images
List<IImageResource> images = beforeEdit.Images;
// Save extracted images and update HTML content
string htmlContent = beforeEdit.GetContent();
foreach (var image in images)
{
string imageFileName = Path.GetFileName(image.FilenameWithExtension);
string imageFilePath = Path.Combine(resourceDirectory, imageFileName);
// Save image to the resource directory
using (var fileStream = new FileStream(imageFilePath, FileMode.Create))
{
using (var imageStream = image.ByteContent)
{
imageStream.CopyTo(fileStream);
}
}
// Update HTML content to reference the correct image path
htmlContent = htmlContent.Replace(image.FilenameWithExtension, $"/images/{imageFileName}");
}
// Optional: Log the updated HTML content for debugging
System.IO.File.WriteAllText(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "debug.html"), htmlContent);
ViewBag.HtmlContent = htmlContent;
TempData["InputFilePath"] = inputFilePath;
return View();
}
Update your SaveEditedDocument method as follows:
public ActionResult SaveEditedDocument(string editor1, string inputFilePath)
{
string editedHtmlContent = editor1;
editedHtmlContent = editedHtmlContent.Replace("src=\"/images/", $"src=\"{Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images").Replace("\\", "/")}/");
// Define the resource directory
string resourceDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
// Create an EditableDocument from the edited HTML content
EditableDocument afterEdit = EditableDocument.FromMarkupAndResourceFolder($"<body>{editedHtmlContent}</body>", resourceDirectory);
// Define the output file path
string outputFilePath = @"D:\\output.pdf";
// Save the edited document back to PDF
using (Editor editor = new Editor(inputFilePath))
{
// You can configure PdfSaveOptions if needed, like password protection, compliance, etc.
PdfSaveOptions saveOptions = new PdfSaveOptions();
// Save the edited document to the output file path
editor.Save(afterEdit, outputFilePath, saveOptions);
}
return RedirectToAction("Index");
}
This ensures that images referenced in the edited HTML content are correctly processed and saved in the output PDF document.
Thanks a lot @atir.tahir now it seems mostly all the things are working
we can fix further design changes based on the orientation of the document after that the remaining design changes can be fixed.
I got another issue while saving the document.
My code below
SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
string editedHtmlContent = request.EditorData;
editedHtmlContent = editedHtmlContent.Replace($"src=\"{request.AppDirectory}", $"src=\"{request.ResourceDirectory}/");
editedHtmlContent = editedHtmlContent.Replace($"src = \"{request.AppDirectory}", $"src = \"{request.ResourceDirectory}/");
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);
EditableDocument afterEdit = EditableDocument.FromMarkup($"<body>{editedHtmlContent}</body>", null);
WordProcessingSaveOptions saveOptions = new WordProcessingSaveOptions();
using (Editor editor = new Editor(inputFilePath))
{
editor.Save(afterEdit, outputFilePath, saveOptions);
}
sp.ReturnStatus = "0";
sp.Ref1 = guid;
return sp;
the document is getting saved with the images properly but while I am uploading the document again using Groupdocs.Viewer the images in the document are not showing. Screenshot for your reference (114.9 KB) also the docx file (11.7 KB) please suggest me some ways to load the document again in the viewer with the images after saving the document from editor and also how can I work with the orientation part for the viewer.
@Niteen_Jadhav
You are again missing the point, FromMarkupAndResourceFolder. Please go through this thread carefully especially SaveEditedDocument.
public ActionResult SaveEditedDocument(string editor1, string inputFilePath)
{
string editedHtmlContent = editor1;
editedHtmlContent = editedHtmlContent.Replace("src=\"/images/", $"src=\"{Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images").Replace("\\", "/")}/");
// Define the resource directory
string resourceDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
// Create an EditableDocument from the edited HTML content
EditableDocument afterEdit = EditableDocument.FromMarkupAndResourceFolder($"<body>{editedHtmlContent}</body>", resourceDirectory);
// Define the output file path
string outputFilePath = @"D:\\output.pdf";
// Save the edited document back to PDF
using (Editor editor = new Editor(inputFilePath))
{
// You can configure PdfSaveOptions if needed, like password protection, compliance, etc.
PdfSaveOptions saveOptions = new PdfSaveOptions();
// Save the edited document to the output file path
editor.Save(afterEdit, outputFilePath, saveOptions);
}
return RedirectToAction("Index");
}
Ok, Sorry I missed that part now it is working fine.
My final code →
SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
string editedHtmlContent = request.EditorData;
editedHtmlContent = editedHtmlContent.Replace($"src=\"{request.AppDirectory}", $"src=\"{request.ResourceDirectory.Replace("\\","/")}/");
editedHtmlContent = editedHtmlContent.Replace($"src = \"{request.AppDirectory}", $"src = \"{request.ResourceDirectory.Replace("\\", "/")}/");
//string resourceDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
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);
EditableDocument afterEdit = EditableDocument.FromMarkupAndResourceFolder($"<body>{editedHtmlContent}</body>", request.ResourceDirectory);
WordProcessingSaveOptions saveOptions = new WordProcessingSaveOptions();
using (Editor editor = new Editor(inputFilePath))
{
editor.Save(afterEdit, outputFilePath, saveOptions);
}
sp.ReturnStatus = "0";
sp.Ref1 = guid;
return sp;
now, what about the document orientation.
I want the size of editor as the orientation of the document.
@Niteen_Jadhav
This is totally a user interface level requirement. GroupDocs.Editor API doesn’t provide any function to accommodate it. You can explore the WYSIWYG HTML editor or jQuery features/support in this regard.
We do have plans to develop more demo applications like I mentioned earlier but we cannot share any ETA at the moment.
Do we have any options in Groupdocs or Aspose so that I can pass this in front-end and assign that to the textarea
@Niteen_Jadhav
We have following resources where you could get help from:
We’d recommend you to explore the UI project and get an idea how the page orientation is handled.