This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to save a file with contenteditable elements preserving the editable content?

more options

I have a HTML page with an element having the contenteditable attribute set to true. I can edit the page, but I can not save the page. Whatever I enter into the element does not get saved to the file.

Example:

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8"/>
     </head>
     <body>
       <div contenteditable="true" style="min-width: 20ch">
         initial value
       </div>
     </body>
   </html>

"Open file", modify the text, "Save as" => modifications are lost

But Chrome does it as expected. The saved file contains the modification.

I have a HTML page with an element having the contenteditable attribute set to true. I can edit the page, but I can not save the page. Whatever I enter into the element does not get saved to the file. Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div contenteditable="true" style="min-width: 20ch"&gt; initial value &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; "Open file", modify the text, "Save as" =&gt; modifications are lost But Chrome does it as expected. The saved file contains the modification.

Modified by ceving

All Replies (5)

more options

Nobody here?

more options

Ok.......... The W3C.org sets the standards and practices and future for web browsers and web pages. If you run your code through these online programs then your pages will show up in any browser as perfect, A 100 browsers out there so.. Also your Google Page Rank will be great.

Can upload a page or give it a URL

So HTML https://validator.w3.org/

CSS https://jigsaw.w3.org/css-validator/

Unicorn https://validator.w3.org/unicorn/

Above for your info.

So I can do nothing with the info.

You want to file a bug report ? file a bug report. https://bugzilla.mozilla.org/ Bug Writing Guidelines : https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines

Would be good that you do. Should explore as what you are trying to set should it not be in a CSS file instead.

I copied what you had there into a notepad, saved as html, Error Element head is missing a required instance of child element title.

From line 5, column 6; to line 5, column 12 8"/>↩ </head>↩ Content model for element head: If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element. Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.

So check and double check, that could be why it is not saving and what program are you using to save this with. If just Firefox....... and Blue Griffin. Why are you not using the Developer Edition https://www.mozilla.org/en-US/firefox/developer/


Please let us know if this solved your issue or if need further assistance.

Modified by Shadow110

more options

Pkshadow said

Ok.......... The W3C.org sets the standards and practices and future for web browsers and web pages. If you run your code through these online programs then your pages will show up in any browser as perfect, A 100 browsers out there so.. Also your Google Page Rank will be great. Can upload a page or give it a URL So HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ Unicorn https://validator.w3.org/unicorn/ Above for your info. So I can do nothing with the info. You want to file a bug report ? file a bug report. https://bugzilla.mozilla.org/ Bug Writing Guidelines : https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines Would be good that you do. Should explore as what you are trying to set should it not be in a CSS file instead. I copied what you had there into a notepad, saved as html, Error Element head is missing a required instance of child element title. From line 5, column 6; to line 5, column 12 8"/>↩ </head>↩ Content model for element head: If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element. Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element. So check and double check, that could be why it is not saving and what program are you using to save this with. If just Firefox....... and Blue Griffin. Why are you not using the Developer Edition https://www.mozilla.org/en-US/firefox/developer/ Please let us know if this solved your issue or if need further assistance.

Talks a bot to me? Nothing in the above answer is related to my question, why modifications to editable elements are lost, when the modified page gets saved. I feel kidded by the question if this solves my issue.

more options

It was info. As was where/how to file a bug report. Putting it here is not going to do anything. So thanks for the info.

Is there anything else that can help you with that is not associated to the above ?

more options

ceving said

I have a HTML page with an element having the contenteditable attribute set to true. I can edit the page, but I can not save the page. Whatever I enter into the element does not get saved to the file. "Open file", modify the text, "Save as" => modifications are lost But Chrome does it as expected. The saved file contains the modification.

Firefox has never worked like that. I suspect the "problem" is that Firefox has needed a JavaScript bookmarklet like this to trigger contentEditable for Gecko to go into "contentEditable" mode. I don't think that can be triggered from the web-side - but I'm not a programmer.

javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200

Plus Firefox / Gecko has always needed an editable file to be opened outside of Firefox in order that the edits be saved.

That said, the situation may be changed a bit in Quantum, or may change "down the road" as more of the old Gecko code is replaced. I just don't know what the situation for "contentEditable" is now and will be "down the road".

Best I can suggest is to see this KB page: Where to go for developer support