Change contenteditable div to false in downloaded html-CodePudding

I have a page with divs where the user inputs some information which then can download to save a copy. It's using <div contenteditable="true">...</div> and when the html is downloaded I would like the divs to not be editable anymore so that the text that has been written stays printed. So I would like to change contenteditable="true" to contenteditable="false" just in the downloaded html (and keep it "true" on the website). How can I implement it within the code below? Many thanks.

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:'   mimeType   ';charset=utf-8,'   encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'text-'   getFormattedTime()   '.html'

function getFormattedTime() {
    var today = new Date();
    var y = today.getFullYear();
    var m = today.getMonth()   1;
    var d = today.getDate();
    return y   "-"   m   "-"   d;
}

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'wrapper','text/html');
});

CodePudding user response：

Use Element.removeAttribute()

You want to removed the contenteditable attribute from the div when the user clicks to download. You can do this by modifying your code as shown so that it calls removeAttribute and the div then prevents further editing.

From:

var elHtml = document.getElementById(elId).innerHTML;

To:

var el = document.getElementById(elId);
el.removeAttribute("contenteditable");
var elHtml = el.innerHTML;

The code won't work correctly as an SO snippet, but you can try this JSFiddle to understand how it works.

Update:

OP asked how to remove the contenteditable attribute from all elements on the page, rather than just one. And this is easily done using querySelectorAll to find all contenteditable elements and removing the attribute from each one like so:

document.querySelectorAll("[contenteditable]").forEach(function(el) 
{ 
    el.removeAttribute("contenteditable")
});

Run the snippet to see how this works:

removeAll.onclick = function() {

    document.querySelectorAll("[contenteditable]").forEach(function(el) { 
        el.removeAttribute("contenteditable")
    });

};

.container > div {
    height: 2em;
    padding: 0.5em;
    margin: 0.5em;
    border: 1px solid dimgray;
    background-color: lightgray;
    color: black;
}

.container > div[contenteditable=true] {
   color: lime;
   background-color: black;
}

<button id="removeAll">Remove All</button>

<div >

  <div contenteditable="true">A</div>
  <div contenteditable="true">B</div>
  <div contenteditable="true">C</div>
  <div contenteditable="true">D</div>
  <div contenteditable="true">E</div>

</div>

CodePudding user response：

In easiest way I will try something like