Webpage Editor
This flow uses suneditor.js (http://suneditor.com/) to generate an HTML editor and publishes the results.
[{"id":"0d042f153bce6088","type":"http in","z":"30db69fe334cb770","name":"","url":"/edit","method":"get","upload":false,"swaggerDoc":"","x":220,"y":140,"wires":[["d33acb53a4dcc288"]]},{"id":"85b16f3540b4475b","type":"http response","z":"30db69fe334cb770","name":"","statusCode":"","headers":{},"x":710,"y":140,"wires":[]},{"id":"d33acb53a4dcc288","type":"template","z":"30db69fe334cb770","name":"suneditor.js","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<link href=\"https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js\"></script>\n\n<link rel=\"stylesheet\"\n href=\"https://fonts.googleapis.com/css?family=Tangerine\">\n <style>\n body {\n font-family: 'Tangerine', serif;\n font-size: 48px;\n }\n </style>\n\n<textarea id=\"sample\" style=\"width:100%;\"></textarea>\n\n<script>SUNEDITOR.create('sample', {\n buttonList: [\n ['save', 'template'],\n ['undo', 'redo'],\n ['font', 'fontSize', 'formatBlock'],\n ['paragraphStyle', 'blockquote'],\n ['bold', 'underline', 'italic', 'strike'],\n ['fontColor', 'hiliteColor', 'textStyle'],\n ['removeFormat'],\n '/', // Line break\n ['outdent', 'indent'],\n ['align', 'horizontalRule', 'list', 'lineHeight'],\n ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.\n /** ['imageGallery'] */ // You must add the \"imageGalleryUrl\".\n ['fullScreen', 'showBlocks'],\n ['preview'],\n /** ['dir', 'dir_ltr', 'dir_rtl'] */ // \"dir\": Toggle text direction, \"dir_ltr\": Right to Left, \"dir_rtl\": Left to Right\n ],\n font: [\n 'Arial', 'Comic Sans MS', 'Tangerine', 'Impact',\n 'Georgia','tahoma', 'Trebuchet MS', 'Verdana'\n ],\n templates: [\n {\n name: 'Template-1',\n html: '<p>HTML source1</p>'\n },\n {\n name: 'Template-2',\n html: '<p>HTML source2</p>'\n }\n ],\n callBackSave: function (contents, isChanged) {\n fetch('http://localhost:1880/publish', {\n method: 'POST',\n headers: {\n 'Accept': 'application/html',\n 'Content-Type': 'application/html'\n },\n body: contents\n })\n .then(response => response)\n .then(response => console.log(response))\n alert(\"Saved!\");\n }\n})\n</script>","output":"str","x":450,"y":140,"wires":[["85b16f3540b4475b"]]},{"id":"4d6f6a02ccc9f94a","type":"http in","z":"30db69fe334cb770","name":"","url":"/publish","method":"post","upload":false,"swaggerDoc":"","x":230,"y":280,"wires":[["7e0427423f11c13c"]]},{"id":"c46bd6ed6cb66e2b","type":"http response","z":"30db69fe334cb770","name":"","statusCode":"","headers":{},"x":710,"y":280,"wires":[]},{"id":"7e0427423f11c13c","type":"change","z":"30db69fe334cb770","name":"","rules":[{"t":"set","p":"html","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":280,"wires":[["c46bd6ed6cb66e2b"]]},{"id":"c10872cb777d9fb0","type":"http in","z":"30db69fe334cb770","name":"","url":"/live","method":"get","upload":false,"swaggerDoc":"","x":220,"y":420,"wires":[["75e9b50713d125ed"]]},{"id":"cd92cad90043f54e","type":"http response","z":"30db69fe334cb770","name":"","statusCode":"","headers":{},"x":790,"y":420,"wires":[]},{"id":"75e9b50713d125ed","type":"change","z":"30db69fe334cb770","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"html","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":420,"wires":[["9e018adc914e1f98"]]},{"id":"9e018adc914e1f98","type":"template","z":"30db69fe334cb770","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"><title>Preview</title>\n\n<link href=\"https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css\" rel=\"stylesheet\">\n\n<link rel=\"stylesheet\"\n href=\"https://fonts.googleapis.com/css?family=Tangerine\">\n<body class=\"sun-editor-editable\" style=\"margin:10px auto !important; height:auto !important;\">{{{payload}}}</body>\n","output":"str","x":620,"y":420,"wires":[["cd92cad90043f54e"]]},{"id":"745df26bd4bebc1f","type":"comment","z":"30db69fe334cb770","name":"Edit HTML on http://<your-NR>/edit","info":"","x":300,"y":80,"wires":[]},{"id":"4a8bdc0ef341b48d","type":"comment","z":"30db69fe334cb770","name":"When user clicks on save button","info":"","x":290,"y":220,"wires":[]},{"id":"8c1dc477e781d3ae","type":"comment","z":"30db69fe334cb770","name":"Page goes live at http://<your-NR>/live","info":"","x":310,"y":360,"wires":[]}]
