Last active
May 17, 2023 17:12
-
-
Save novecentonove/3f1e221d511e69cf6055195ee450ad85 to your computer and use it in GitHub Desktop.
Quill Editor, post html data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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>Quill Form</title> | |
| <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> | |
| <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> | |
| </head> | |
| <body> | |
| <?php | |
| if(!empty($_POST)){ | |
| var_dump($_POST); | |
| } | |
| ?> | |
| <h1>Quill Editor, post data</h1> | |
| <!-- Create the editor container --> | |
| <form action="" method="POST"> | |
| <div id="editor"></div> | |
| <input type="hidden" name="hiddenInput" id="hiddenInput"> | |
| <button>SEND</button> | |
| </form> | |
| <script> | |
| var quill = new Quill('#editor', { | |
| theme: 'snow' | |
| }); | |
| var form = document.querySelector("form"); | |
| var hiddenInput = document.querySelector('#hiddenInput'); | |
| form.addEventListener('submit', function(e){ | |
| hiddenInput.value = quill.root.innerHTML; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- with Alpine js, 2 editors --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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>Quill Form</title> | |
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script> | |
| <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> | |
| <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> | |
| </head> | |
| <body> | |
| <?php | |
| if(!empty($_POST)){ | |
| var_dump($_POST); | |
| } | |
| ?> | |
| <h1>Quill Editor, post data</h1> | |
| <!-- Create the editor container --> | |
| <form x-data="data()" x-init="initQuill()" x-on:submit="submit()" action="" method="POST"> | |
| <div x-ref="ed1"></div> | |
| <input x-ref="ed1value" type="hidden" name="hiddenInput"> | |
| <div x-ref="ed2"></div> | |
| <input x-ref="ed2value" type="hidden" name="hiddenInput2"> | |
| <button>SEND</button> | |
| </form> | |
| <script> | |
| function data(){ | |
| return { | |
| initQuill(){ | |
| new Quill(this.$refs.ed1, {theme: 'snow'}); | |
| new Quill(this.$refs.ed2, {theme: 'snow'}); | |
| }, | |
| submit(){ | |
| this.$refs.ed1value.value = this.$refs.ed1.__quill.root.innerHTML; | |
| this.$refs.ed2value.value = this.$refs.ed2.__quill.root.innerHTML; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment