John Davidson

Message:

I'm making statistical reports for customers and I chose HTML solution as report template.

I have this issue where I want a user to be able to edit a text box of a html document and save it (as soon as he leave the area or when clicking save button) to annotate things like graphics for instance.

The content should be printed each time he opens back the .html file. Also, there are potentially multiple html pages inside the report (one editable box per sub html pages is enough)

Moreover, a big constraint here is that this html file is open locally and should be shared across users (I have to stick with this all-client side solution for now but I'm planning on doing it server side).

As you may have understood already I can't use localStorage solution as it is system/user dependant and data won't stick if people are sharing the report.

I'd rather go with a solution where it is possible to save it in a $UID.txt file for instance (one $UID for each sub pages people wants to annotate) and retrieve it so as long as the state of the editable content is saved at the same place in the report folder architecture, it will be opened as is by every other people when they get this edited report.

Thanks for your time !

A.

EDIT

I should have stipulated few things :

1- The report is composed of hundred of stand-alone html files. It is basic html and javascript components that are translated by a classic web browser without the need of an internet connexion or a localhost server.

2- Folder structure :

root_folder

  |

  |---- index.html (main page to access all sub pages)

  |---- graphics

          |---- graphic1.html

          |---- graphic2.html

3- People need to share the report on their own and there is no user database. The only constraint is that after performing a modification on an editable content box, the text should be written somewhere in the folder structure (see 2) and retrieved automatically the next time some user (either the original editor or the next one on an other computer as long as the first editor shared the whole directory with its own edit) will open (or refresh) the html file.

I know that there are better solutions but I really have to stick with a stand-alone solution for now, hoping that there is a solution to this issue !

Thanks again for your time.

---

My Answer:
One possible solution for saving and retrieving text from a contenteditable data box in a specific file on the client side is to use the File API in JavaScript. Here's a basic example of how you could achieve this:

1. When the user leaves the editable content area or clicks a save button, you can capture the text content of the contenteditable element and save it to a file using the File API.

javascript
// Get the text content of the contenteditable element
var text = document.getElementById('editableContent').innerText;

// Create a new Blob object with the text content
var blob = new Blob([text], { type: 'text/plain' });

// Create a new FileWriter object
var fileWriter = new FileWriter();

// Write the blob to a file
fileWriter.write('path/to/your/file.txt', blob);


2. To retrieve the text content from the file and display it in the contenteditable element when the user opens the HTML file, you can read the file using the File API.

javascript
// Create a new FileReader object
var fileReader = new FileReader();

// Read the file
fileReader.read('path/to/your/file.txt', function(text) {
// Set the text content of the contenteditable element
document.getElementById('editableContent').innerText = text;
});


Please note that the File API is not supported in all browsers, so you may need to check for compatibility and provide fallback options if needed. Additionally, you will need to handle file paths and permissions appropriately based on your folder structure and user access rights.

This solution should allow users to save and retrieve text from contenteditable data boxes in specific files on the client side, without relying on localStorage or server-side storage.