Libellés

Iframe design mode pour les navigateurs Chromium et Firefox 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- iframe en mode design -->
    <iframe id="editor-iframe" src="" frameborder="1" style="width: 500px; height:500px;"></iframe>

    <script>
        /* Quand la fenêtre est chargée */
        window.onload = loadEditor();

        function loadEditor() {
            /* Récupération de l'élément #editor-iframe */
            var editor = document.getElementById("editor-iframe");

            /* Bascule le document en mode design pour Chromium */
            putEditorIntoDesignMode(editor);

            /* Quand l'éditeur est chargé pour Firefox */
            editor.onload = function() {
                putEditorIntoDesignMode(editor);
            };

        }

        function putEditorIntoDesignMode(editor) {
            /* Récupération du document de l'iframe avec contentDocument ou contentWindow.document */
            var doc = editor.contentDocument || editor.contentWindow.document;
            /* Bascule le document en mode design */
            doc.designMode = "on";
        }
    </script>
</body>

</html>
Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire