| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 | <!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">    <link rel="stylesheet" href="../../css/froala_editor.css">    <link rel="stylesheet" href="../../css/froala_style.css">    <style>        body {            text-align: center;        }        div#editor {            width: 81%;            margin: auto;            text-align: left;        }    </style></head><body>    <div id="editor">        <h1>Init On Button</h1>        <p>It is possible to initialize the WYSIWYG HTML editor only on a button.</p>        <button id='edit'>Button</button>    </div>    <script type="text/javascript" src="../../js/froala_editor.min.js"></script>    <script type="text/javascript" src="../../js/plugins/edit_in_popup.min.js"></script>    <script>        const editorInstance = new FroalaEditor('#edit', {            events: {                contentChanged: function () {                    console.log('content changed')                }            }        })    </script></body></html>
 |