{"id":10688,"date":"2021-07-28T15:33:52","date_gmt":"2021-07-28T07:33:52","guid":{"rendered":"https:\/\/www.hkmu.edu.hk\/lipace\/?page_id=10688"},"modified":"2026-03-26T12:05:41","modified_gmt":"2026-03-26T04:05:41","slug":"testing-hd3","status":"publish","type":"page","link":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/","title":{"rendered":"Testing HD3"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t```html\r\n\r\n\r\n\r\n \r\n Two\u2011way WYSIWYG HTML Editor<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n body {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n h1 {\r\n margin: 0;\r\n padding: 0.5rem 1rem;\r\n background: #2c3e50;\r\n color: #ecf0f1;\r\n font-size: 1.1rem;\r\n }\r\n .container {\r\n flex: 1;\r\n display: flex;\r\n gap: 0.5rem;\r\n padding: 0.5rem;\r\n background: #ecf0f1;\r\n }\r\n .pane {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 0;\r\n }\r\n .pane-header {\r\n font-weight: bold;\r\n margin-bottom: 0.25rem;\r\n }\r\n textarea,\r\n .iframe-wrapper {\r\n width: 100%;\r\n flex: 1;\r\n border: 1px solid #bdc3c7;\r\n border-radius: 4px;\r\n background: #fff;\r\n \/* make the \u201ctext boxes\u201d resizable *\/\r\n resize: both;\r\n overflow: auto;\r\n }\r\n textarea {\r\n padding: 0.5rem;\r\n font-family: Consolas, Monaco, \"Courier New\", monospace;\r\n font-size: 13px;\r\n line-height: 1.3;\r\n white-space: pre;\r\n }\r\n .iframe-wrapper {\r\n position: relative;\r\n padding: 0;\r\n }\r\n iframe {\r\n border: none;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1>Live Two\u2011way WYSIWYG HTML Editor<\/h1>\r\n\r\n <div class=\"container\">\r\n <!-- HTML code text box -->\r\n <div class=\"pane\">\r\n <div class=\"pane-header\">HTML Code<\/div>\r\n <textarea id=\"htmlInput\" spellcheck=\"false\"><\/textarea>\r\n <\/div>\r\n\r\n <!-- WYSIWYG editor \u201ctext box\u201d (iframe document is editable) -->\r\n <div class=\"pane\">\r\n <div class=\"pane-header\">WYSIWYG Editor (edit here)<\/div>\r\n <div class=\"iframe-wrapper\">\r\n <iframe id=\"editorFrame\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const htmlInput = document.getElementById('htmlInput');\r\n const iframe = document.getElementById('editorFrame');\r\n\r\n let isUpdatingFromText = false;\r\n let isUpdatingFromIframe = false;\r\n\r\n \/\/ Ensure <body> is editable inside iframe, but we do NOT expose\r\n \/\/ contenteditable in the HTML code box.\r\n function makeBodyEditable(html) {\r\n if (!html.trim()) {\r\n return '<!DOCTYPE html>\\n<html>\\n<head>\\n' +\r\n ' <meta charset=\"UTF-8\">\\n' +\r\n ' <title>Empty document<\/title>\\n' +\r\n '<\/head>\\n<body contenteditable=\"true\">\\n<\/body>\\n<\/html>';\r\n }\r\n\r\n \/\/ If there is no <html> tag, wrap given HTML as body content.\r\n if (!\/<html[\\s>]\/i.test(html)) {\r\n return '<!DOCTYPE html>\\n<html>\\n<head>\\n' +\r\n ' <meta charset=\"UTF-8\">\\n' +\r\n ' <title>Document<\/title>\\n' +\r\n '<\/head>\\n<body contenteditable=\"true\">\\n' +\r\n html +\r\n '\\n<\/body>\\n<\/html>';\r\n }\r\n\r\n \/\/ Inject contenteditable=\"true\" into <body>, removing any existing one.\r\n return html.replace(\/<body([^>]*)>\/i, function (match, attrs) {\r\n const cleaned = attrs.replace(\/\\scontenteditable\\s*=\\s*[\"'][^\"']*[\"']\/i, '');\r\n return '<body' + cleaned + ' contenteditable=\"true\">';\r\n });\r\n }\r\n\r\n \/\/ Put HTML from the textarea into the iframe (with editable body).\r\n function updateIframeFromText() {\r\n const doc = iframe.contentDocument || iframe.contentWindow.document;\r\n const html = makeBodyEditable(htmlInput.value);\r\n doc.open();\r\n doc.write(html);\r\n doc.close();\r\n }\r\n\r\n \/\/ Get HTML from iframe and push back into textarea.\r\n function handleIframeInput() {\r\n if (isUpdatingFromText) return;\r\n isUpdatingFromIframe = true;\r\n\r\n const doc = iframe.contentDocument || iframe.contentWindow.document;\r\n if (!doc.documentElement) {\r\n isUpdatingFromIframe = false;\r\n return;\r\n }\r\n\r\n let html = doc.documentElement.outerHTML;\r\n\r\n \/\/ Strip contenteditable from <body> so the source looks clean.\r\n html = html.replace(\/<body([^>]*)>\/i, function (match, attrs) {\r\n const cleaned = attrs.replace(\/\\scontenteditable\\s*=\\s*[\"'][^\"']*[\"']\/i, '');\r\n return '<body' + cleaned + '>';\r\n });\r\n\r\n \/\/ Add <!DOCTYPE html> and ensure result is not in a single line.\r\n html = '<!DOCTYPE html>\\n' + html;\r\n html = html.replace(\/><\/g, '>\\n<');\r\n\r\n htmlInput.value = html;\r\n isUpdatingFromIframe = false;\r\n }\r\n\r\n \/\/ When HTML code changes, update the iframe.\r\n htmlInput.addEventListener('input', function () {\r\n if (isUpdatingFromIframe) return;\r\n isUpdatingFromText = true;\r\n updateIframeFromText();\r\n isUpdatingFromText = false;\r\n });\r\n\r\n \/\/ When iframe finishes loading its document, hook its events.\r\n iframe.addEventListener('load', function () {\r\n const doc = iframe.contentDocument || iframe.contentWindow.document;\r\n if (!doc) return;\r\n\r\n \/\/ Listen inside the editable document for changes.\r\n if (doc.body) {\r\n doc.body.addEventListener('input', handleIframeInput);\r\n doc.body.addEventListener('keyup', handleIframeInput);\r\n doc.body.addEventListener('paste', handleIframeInput);\r\n }\r\n });\r\n\r\n \/\/ Initial demo HTML (includes <style> and <script>)\r\n const initialHtml = `<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Demo document<\/title>\r\n <style type=\"text\/css\">\r\n body {\r\n font-family: Arial, sans-serif;\r\n padding: 1rem;\r\n }\r\n h1 {\r\n color: #336699;\r\n }\r\n .highlight {\r\n background-color: #fff9c4;\r\n }\r\n <\/style>\r\n <script language=\"JavaScript\">\r\n function toggleHighlight() {\r\n var p = document.getElementById('demo-paragraph');\r\n if (!p) return;\r\n p.classList.toggle('highlight');\r\n }\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <h1>WYSIWYG HTML editor demo<\/h1>\r\n <p id=\"demo-paragraph\">\r\n Edit this content here or change the HTML in the left text box.\r\n CSS (<style>) and JavaScript (<script>) are preserved.\r\n <\/p>\r\n <button onclick=\"toggleHighlight()\">Run JavaScript (toggle highlight)<\/button>\r\n<\/body>\r\n<\/html>`;\r\n\r\n \/\/ Load initial content into both panes.\r\n htmlInput.value = initialHtml.replace(\/><\/g, '>\\n<'); \/\/ multi-line\r\n updateIframeFromText();\r\n\r\n \/\/ ---------------------------------------------------------------------\r\n \/\/ OPTIONAL: Editor.js JSON integration (placeholder)\r\n \/\/\r\n \/\/ If you have Editor.js output JSON, you can convert it to HTML and\r\n \/\/ assign it to htmlInput.value, then call updateIframeFromText().\r\n \/\/\r\n \/\/ Example usage:\r\n \/\/\r\n \/\/ const editorJsData = {...}; \/\/ Editor.js JSON\r\n \/\/ const htmlFromEditorJs = convertEditorJsToHtml(editorJsData);\r\n \/\/ htmlInput.value = htmlFromEditorJs;\r\n \/\/ updateIframeFromText();\r\n \/\/\r\n \/\/ Implement `convertEditorJsToHtml` according to your Editor.js setup.\r\n \/\/ ---------------------------------------------------------------------\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>```html Two\u2011way WYSIWYG HTML Editor Live Two\u2011way WYSIWYG HTML Editor HTML Code WYSIWYG Editor (edit here) WYSIWYG HTML editor demo Edit this content here or change the HTML in the left text box. CSS (<style>) and JavaScript (<script>) are preserved. Run JavaScript (toggle highlight) `; \/\/ Load initial content into both panes. htmlInput.value = initialHtml.replace(\/><\/p>\n","protected":false},"author":26,"featured_media":10929,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page.php","meta":{"_expiration-date-status":"","_expiration-date":0,"_expiration-date-type":"","_expiration-date-categories":[],"_expiration-date-options":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.3 (Yoast SEO v21.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Testing HD3 - LiPACE - Hong Kong Metropolitan University<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing HD3\" \/>\n<meta property=\"og:description\" content=\"```html Two\u2011way WYSIWYG HTML Editor Live Two\u2011way WYSIWYG HTML Editor HTML Code WYSIWYG Editor (edit here) WYSIWYG HTML editor demo Edit this content here\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/\" \/>\n<meta property=\"og:site_name\" content=\"LiPACE - Hong Kong Metropolitan University\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-26T04:05:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hkmu.edu.hk\/lipace\/wp-content\/uploads\/sites\/7\/2021\/07\/iStock-861792724-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1709\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Testing HD3 - LiPACE - Hong Kong Metropolitan University","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/","og_locale":"en_US","og_type":"article","og_title":"Testing HD3","og_description":"```html Two\u2011way WYSIWYG HTML Editor Live Two\u2011way WYSIWYG HTML Editor HTML Code WYSIWYG Editor (edit here) WYSIWYG HTML editor demo Edit this content here","og_url":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/","og_site_name":"LiPACE - Hong Kong Metropolitan University","article_modified_time":"2026-03-26T04:05:41+00:00","og_image":[{"width":2560,"height":1709,"url":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-content\/uploads\/sites\/7\/2021\/07\/iStock-861792724-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/","url":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/","name":"Testing HD3 - LiPACE - Hong Kong Metropolitan University","isPartOf":{"@id":"https:\/\/www.hkmu.edu.hk\/lipace\/#website"},"datePublished":"2021-07-28T07:33:52+00:00","dateModified":"2026-03-26T04:05:41+00:00","breadcrumb":{"@id":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hkmu.edu.hk\/lipace\/testing-hd3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Li Ka Shing School of Professional and Continuing Education (LiPACE)","item":"\/lipace\/"},{"@type":"ListItem","position":2,"name":"Testing HD3"}]},{"@type":"WebSite","@id":"https:\/\/www.hkmu.edu.hk\/lipace\/#website","url":"https:\/\/www.hkmu.edu.hk\/lipace\/","name":"LiPACE - Hong Kong Metropolitan University","description":"LiPACE - Hong Kong Metropolitan University","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hkmu.edu.hk\/lipace\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/pages\/10688"}],"collection":[{"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/comments?post=10688"}],"version-history":[{"count":58,"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/pages\/10688\/revisions"}],"predecessor-version":[{"id":73213,"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/pages\/10688\/revisions\/73213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/media\/10929"}],"wp:attachment":[{"href":"https:\/\/www.hkmu.edu.hk\/lipace\/wp-json\/wp\/v2\/media?parent=10688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}