Use o designMode=on
, mas isto deve ser definido dentro do documento que estiver dentro do iframe, setar diretamente no elemento <iframe>
não vai dar certo, então por exemplo crie um iframe assim:
var editor = document.querySelector("iframe#editor");
if (editor) {
var d = editor.contentDocument;
d.document.designMode = "on";
}
O HTML sendo assim:
<iframe src="editor.html"></iframe>
Note que o src=""
deve ser do mesmo domínio, caso contrário não terá como obter o contentDocument
Nota: até aonde me recordo designMode
opera via JavaScript (ou APIs externas da interface usada em webView
s, por exemplo um aplicativo próprio), não tem como setar diretamente no HTML, o único caminho é usar <[Element] contenteditable="true">
, pode pode exemplo definir diretamente no <body>
, por exemplo:
Criar um editor com iframe dinâmico (sem a existência de uma página extra)
Os navegadores modernos possuem a propriedade srcdoc="<conteudo HTML>"
, você então pode setar dinamicamente o conteúdo, o que pode ser bem útil e muito mais pratico, acaso queira criar um editor de texto:
JavaScript:
var editor = document.querySelector("iframe#editor");
if (editor) {
editor.contentDocument.designMode = "on";
}
HTML:
<iframe id="editor" srcdoc="<p>Foo, Bar</p>"></iframe>
Nota: Sandbox não permite interação direta, portanto irá falhar
Propriedade Element.contentEditable
A diferença básica do designMode
para contentEditable
o é que o primeiro altera o documento, já o segundo é capaz de editar apenas um elemento, exemplo do contentEditable
Nota: true e false em contentEditable
devem ser strings e não booleanos, ao menos no momento de checar/leitura da propriedade.
Stack Overflow<br>
<div id="editor" contenteditable="true">
Olá, mundo!
</div>
Stack Overflow<br>
Com 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>
execCommand: Negrito, itálico e sublinhado e mais
Tanto o contentEditable quanto o designMode suportam o comando execCommand
, o campo que estiver com "foco" receberá o comando do document.execCommand
, comandos suportados:
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
, outdent
, paste
, redo
, removeFormat
, selectAll
, strikeThrough
, subscript
, superscript
, underline
, undo
, unlink
e styleWithCSS
Nota: O useCSS
esta em desuso
Nota: irei editar em breve e detalhar os comandos
Exemplo de uso:
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>