JSFiddle - React, Tailwind, and code Playground
HTML
<div class="target">I'm normal "browse" mode</div>
<div contenteditable="true">
<div class="target">I'm in a content editable</div>
</div>
<button id="clickbtn">Hide all "targets"</button>
<button id="magicfixbtn">Magic Fix everything in IE button</button>
CSS
.target {
width:100px;
height:100px;
background:red;
}
[contenteditable]{
margin:20px;
}
JavaScript
var btn = document.getElementById('clickbtn');
var magic = document.getElementById('magicfixbtn');
magic.addEventListener('click', function(){
if (document.queryCommandEnabled('RespectVisibilityInDesign')){
document.execCommand('RespectVisibilityInDesign',true,true);
}
});
btn.addEventListener('click', function(){
var elements = document.getElementsByClassName('target');
for(var i = 0; i < elements.length; i++){
var original = elements[i].style.visibility;
if (original === "hidden"){
elements[i].style.visibility = "visible";
}else{
elements[i].style.visibility = "hidden";
}
}
});