How do I make IFRAME editable?

Asked

Viewed 949 times

2

I remember a long time ago I used a code in a IFRAME that allowed me to type, to put bold or italics in the fonts, inside this iframe.

I know it’s not with the option contenteditable, was another form of configuration.

I asked that question just to remind you:

What is the attribute that, when changed, allows me to leave a iframe editable?

Note: I’m pretty sure I did it for Javascript, but I’m not remembered anymore.

javascript html iframe

  • Have you looked at this link below? I think it can help you, but it’s done in jquery https://codepen.io/andreich1980/pen/RWBzjX

  • same domain or different domain?

  • In the same field

  • The idea I have is to pass parameters in the iframe src, recover these parameters in the iframe page and apply in css

  • Now I’m confused, but would it be something like that? I only made for some parameters in the font styles of iframe but you can pass as many parameters as you want http://kithomepage.com/sos/pagina-comiframe.php

2 answers

6


Use the designMode=on, but this must be defined within the document inside the iframe, set directly in the element <iframe> won’t 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";
}

The HTML being so:

<iframe src="editor.html"></iframe>

Note that the src="" must be of the same domain, otherwise you will not be able to obtain the contentDocument

Note: as far as I can remember designMode operates via Javascript (or external Apis of the interface used in webViews, for example an application of its own), has no way to set directly in HTML, the only way is to use <[Element] contenteditable="true">, can example set directly on <body>, for example:

Create an editor with dynamic iframe (no extra page)

Modern browsers own the property srcdoc="<conteudo HTML>", you can then dynamically set the content, which can be very useful and much more practical, if you 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

Estate Element.contentEditable

The basic difference of designMode for contentEditable the first changes the document, the second is able to edit only one element, example of contentEditable

Note: true and false in contentEditable must be strings and not boolean, at least at the time of checking/reading the property.

Stack Overflow<br>

<div id="editor" contenteditable="true">
  Olá, mundo!
</div>

Stack Overflow<br>

Javascript-enabled:

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: bold, italic and underlined and more

Both contentEditable and designMode support the command execCommand, the field with "focus" will receive the command of document.execCommand, supported commands:

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 and styleWithCSS

Note: The useCSS is in disuse

Note: I will edit soon and detail the commands

Example of use:

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>

  • and how to put bold or italic in the sources?

  • @Leocaracciolo added an example in the reply, see if it’s easy to understand, note that Document.execCommad is for any element with contentEditable, as long as it’s focused and the document be the same (I believe).

  • 1

    Show!! You’re the man!

0

A way to do this with iframe no page is applying contentEditable right in the body of iframe 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;
}

See on Jsfiddle due to local snippet limitations.

EDIT

You can also change styles by accessing CSS:

doc.body.style.fontSize = '30px';
doc.body.style.color = 'red';

  • and how to put bold or italic in the sources?

  • @Leocaracciolo Bold CTRL+b and italic CTRL+i

  • Improved, and change colors, font, size etc...?

  • @Leocaracciolo I added in the reply. :)

Browser other questions tagged javascript html iframe

You are not signed in. Login or sign up in order to post.