I remember a long time after using a code in a IFRAME that allowed me to type, put bold or italic in the fonts, within that iframe .
I know it's not with the option contenteditable , it was another way of setting.
I asked the same question just to remember:
What is the attribute that, when changed, allows me to be able to leave an ed iframe ?
Note : I'm pretty sure I did this by Javascript, but I'm no longer remembered.
Use designMode=on , but this must be defined inside the document that is inside the iframe, set directly in the <iframe> element will not work, so for example create an iframe like this:
var editor = document.querySelector("iframe#editor");
if (editor) {
var d = editor.contentDocument;
d.document.designMode = "on";
}
HTML looks like this:
<iframe src="editor.html"></iframe>
Note that src="" must be from the same domain, otherwise you will not be able to get contentDocument
Note: Until I remember
designModeoperates via JavaScript (or external interface APIs used inwebViews, eg an application itself) in HTML , the only way is to use<[Element] contenteditable="true">, can example set directly in<body>, for example:
Modern browsers have the srcdoc="<conteudo HTML>" property, so you can dynamically set the content, which can be useful and much more practical, perhaps want to create a text editor:
JavaScript:
var editor = document.querySelector("iframe#editor");
if (editor) {
editor.contentDocument.designMode = "on";
}
HTML:
<iframe id="editor" srcdoc="<p>Foo, Bar</p>"></iframe>
Note: Sandbox does not allow direct interaction, so it will fail
Element.contentEditable
The basic difference from designMode to contentEditable o is that the first one changes the document, the second one is able to edit only one element, example of contentEditable
Note: true and false in
contentEditablemust be strings and not booleans, at least when checking / reading the property.
Stack Overflow<br>
<div id="editor" contenteditable="true">
Olá, mundo!
</div>
Stack Overflow<br>With Javascript:
var ativar = document.querySelector("#ativar");
if (ativar) {
ativar.onclick = function () {
var editor = document.querySelector("div#editor");
if (editor) {
if (editor.contentEditable === "true") {
editor.contentEditable = "false"; //Desativa
} else {
editor.contentEditable = "true"; //Ativa
editor.focus();
}
}
};
}Stack Overflow<br>
<div id="editor">
Olá, mundo!
</div>
Stack Overflow<br>
<button id="ativar">Ativar/desativa editor</button> Both contentEditable and designMode support execCommand >, the field that is "focus" will receive the command document.execCommand , commands supported:
backColor , bold , contentReadOnly , copy , createLink , cut , decreaseFontSize , delete , enableInlineTableEditing , enableObjectResizing , fontName , fontSize , foreColor , formatBlock , forwardDelete , heading , hiliteColor , increaseFontSize indent , insertBrOnReturn , insertHorizontalRule , insertHTML , insertImage , insertOrderedList , insertUnorderedList , insertParagraph , insertText , italic , justifyCenter , justifyFull , justifyLeft , justifyRight and outdent
Note:
pasteis deprecatedNote: I will edit soon and detail commands
Example usage:
document.querySelector("#negrito").onclick = function() {
document.execCommand("bold");
};
document.querySelector("#italico").onclick = function() {
document.execCommand("italic");
};
document.querySelector("#sublinhado").onclick = function() {
document.execCommand("strikeThrough");
};.editor {
border: 1px #c0c0c0 solid;
padding: 5px;
margin: 5px;
min-width: 400px;
min-height: 200px;
}<button id="negrito">Negrito</button>
<button id="italico">Italico</button>
<button id="sublinhado">Sublinhado</button>
<hr>
Stack Overflow<br>
<div class="editor" contenteditable="true">
Olá, mundo 1!
</div>
<div class="editor" contenteditable="true">
Olá, mundo 2!
</div>
<div class="editor" contenteditable="true">
Olá, mundo c-137!
</div>
Stack Overflow<br> One way to do this with iframe without page is by applying contentEditable direct to body of iframe with JavaScript:
HTML:
<iframe src="" style="width: 50%; height: 150px;" id="iframe"></iframe>
JS:
window.onload = function(){
var frameElement = document.getElementById("iframe");
var doc = frameElement.contentDocument;
doc.body.contentEditable = true;
}
View in JSFiddle because of the limitations of the local snippet.
You can also change styles by accessing CSS:
doc.body.style.fontSize = '30px';
doc.body.style.color = 'red';