Form richtext editor
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"81039e15-ccb7-857e-d0d3-da79b09c8e68","type":"Block","meta":{"displayName":"Form richtext quilljs"},"tag":"div","classes":["01910bd6-c336-5189-cf0f-71568d93844c"],"children":["b7019c0f-bfcf-e32b-ee08-2bbb382742a3"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b7019c0f-bfcf-e32b-ee08-2bbb382742a3","type":"Block","tag":"div","classes":["2e561486-8717-c3e1-c94b-2f60e45f8939"],"children":["77a6e389-1ad1-3235-2a11-0f995cc4df8f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"77a6e389-1ad1-3235-2a11-0f995cc4df8f","type":"Block","tag":"div","classes":["5eeb7aa6-eb24-a583-d29d-d231e90b4c6f"],"children":["ad201055-af36-82a0-dfbe-0b14ca7e48c7"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ad201055-af36-82a0-dfbe-0b14ca7e48c7","type":"Block","tag":"div","classes":["be493314-70c0-58af-e646-ecdad756c36e"],"children":["d63ed605-9180-5ddf-8037-6ab7cd094f5a","df8386db-58ab-a3c0-6ee3-7c2070877927"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d63ed605-9180-5ddf-8037-6ab7cd094f5a","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e"],"children":["ceec139e-6fba-2828-7872-c5dd8957d959"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ceec139e-6fba-2828-7872-c5dd8957d959","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e258a4"],"children":["33cf5f2a-b482-5cc6-a736-348f612ee3b6"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"33cf5f2a-b482-5cc6-a736-348f612ee3b6","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e","90705d1f-1425-92ed-8b78-e004484ff189"],"children":["03e33295-9b29-9313-9d07-277882296c77"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"03e33295-9b29-9313-9d07-277882296c77","type":"Heading","tag":"h3","classes":["a0dedb4b-352a-5c52-0822-4d1fe7d27844"],"children":["7a6d4444-476d-401f-1157-c012ade586af"],"data":{"tag":"h3","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7a6d4444-476d-401f-1157-c012ade586af","text":true,"v":"Editable richtext element"},{"_id":"df8386db-58ab-a3c0-6ee3-7c2070877927","type":"FormWrapper","tag":"div","classes":[],"children":["4cee052e-a65d-7aa2-7d2c-bd06039751e2","dd59f9f9-2ca5-7050-9d3d-7d58b6b3419a","111b187c-9f01-a716-aba1-156bcf92e996"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"4cee052e-a65d-7aa2-7d2c-bd06039751e2","type":"FormForm","tag":"form","classes":[],"children":["ac42351f-513c-4cbc-6a06-7a2680948ac6"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Email Form 4"},"attr":{"id":"email-form-4","name":"email-form-4","data-name":"Email Form 4","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ac42351f-513c-4cbc-6a06-7a2680948ac6","type":"Block","tag":"div","classes":[],"children":["88a869b2-8aad-d68c-483e-d19811bbaa51"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"88a869b2-8aad-d68c-483e-d19811bbaa51","type":"Block","tag":"div","classes":["ed4fc315-d502-be68-1704-80cb18bc53a0","91db812f-6a64-c107-fbfa-734a9d12dcb5"],"children":["373c028d-c254-f99b-38b1-6f6826ae4819","9f40e41f-21c1-b35e-cc30-644f6e34ca39"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"style":{"base":{"main":{"noPseudo":{}}}}}},{"_id":"373c028d-c254-f99b-38b1-6f6826ae4819","type":"FormBlockLabel","tag":"label","classes":["ed4fc315-d502-be68-1704-80cb18bc53a4","ed4fc315-d502-be68-1704-80cb18bc53a5","ed4fc315-d502-be68-1704-80cb18bc53a7"],"children":["ba97e343-69a7-0b69-315b-fcb1e000d28a"],"data":{"attr":{"for":"field-3","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ba97e343-69a7-0b69-315b-fcb1e000d28a","text":true,"v":"Body"},{"_id":"9f40e41f-21c1-b35e-cc30-644f6e34ca39","type":"HtmlEmbed","tag":"div","classes":["91db812f-6a64-c107-fbfa-734a9d12dcae"],"children":[],"v":"<!-- Create the editor container -->\n<div id=\"editor\" class=\"input-field textarea quill\">\n</div>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<!-- Create the editor container -->\n<div id=\"editor\" class=\"input-field textarea quill\">\n</div>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"dd59f9f9-2ca5-7050-9d3d-7d58b6b3419a","type":"FormSuccessMessage","tag":"div","classes":[],"children":["97c14830-0199-4299-fe82-74a747df459e"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"97c14830-0199-4299-fe82-74a747df459e","type":"Block","tag":"div","classes":[],"children":["675cee59-7df1-8517-59da-7cb9f9e3a982"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"675cee59-7df1-8517-59da-7cb9f9e3a982","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"111b187c-9f01-a716-aba1-156bcf92e996","type":"FormErrorMessage","tag":"div","classes":[],"children":["a94dd0b6-8c01-1a72-ca4b-b9ae245b010b"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"a94dd0b6-8c01-1a72-ca4b-b9ae245b010b","type":"Block","tag":"div","classes":[],"children":["d19d60ab-d865-5669-137a-82cfa286846b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d19d60ab-d865-5669-137a-82cfa286846b","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"ed4fc315-d502-be68-1704-80cb18bc53a4","fake":false,"type":"class","name":"form input label","namespace":"","comb":"","styleLess":"margin-bottom: 1rem; color: #737373; font-size: 1rem; font-weight: 500;","variants":{},"children":["ed4fc315-d502-be68-1704-80cb18bc53a5"],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"ed4fc315-d502-be68-1704-80cb18bc53a7","fake":false,"type":"class","name":"add blog","namespace":"","comb":"&","styleLess":"color: #404040; font-size: 1.3rem; font-weight: 700;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"91db812f-6a64-c107-fbfa-734a9d12dcb5","fake":false,"type":"class","name":"relative","namespace":"","comb":"&","styleLess":"position: relative;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"5eeb7aa6-eb24-a583-d29d-d231e90b4c6f","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; width: 100%;","variants":{},"children":["04c9be61-61c7-13a6-ce28-a47e6f31114c"],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null},{"_id":"ed4fc315-d502-be68-1704-80cb18bc53a0","fake":false,"type":"class","name":"Input Wrapper 2","namespace":"","comb":"","styleLess":"max-width: 100%;","variants":{"medium":{"styleLess":"flex-grow: 1; flex-shrink: 1; flex-basis: 0%;"}},"children":["91db812f-6a64-c107-fbfa-734a9d12dcb5"],"origin":null,"selector":null},{"_id":"91db812f-6a64-c107-fbfa-734a9d12dcae","fake":false,"type":"class","name":"Code Embed 32","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; margin-bottom: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"01910bd6-c336-5189-cf0f-71568d93844c","fake":false,"type":"class","name":"section blog featured list","namespace":"","comb":"","styleLess":"font-family: Arial;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"be493314-70c0-58af-e646-ecdad756c36e","fake":false,"type":"class","name":"Form components","namespace":"","comb":"","styleLess":"padding-top: 4rem; padding-bottom: 4rem;","variants":{},"children":["af890653-7c7e-d635-91b6-737358404c87"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"2e561486-8717-c3e1-c94b-2f60e45f8939","fake":false,"type":"class","name":"padding global","namespace":"","comb":"","styleLess":"","variants":{},"children":["b6ecef7c-8790-e41f-e752-b5bd0ea57412"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"a0dedb4b-352a-5c52-0822-4d1fe7d27844","fake":false,"type":"class","name":"heading h3","namespace":"","comb":"","styleLess":"font-size: 3rem; line-height: 1.3;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e2589e","fake":false,"type":"class","name":"margin-bottom 2","namespace":"","comb":"","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{"medium":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"small":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"tiny":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"}},"children":["30e35f4a-4769-6d57-8a39-760e31e258b7","30e35f4a-4769-6d57-8a39-760e31e258b8","30e35f4a-4769-6d57-8a39-760e31e258b9","a321b37e-da8c-043e-fda6-c052fe38eccb","a321b37e-da8c-043e-fda6-c052fe38eccd","90705d1f-1425-92ed-8b78-e004484ff188","90705d1f-1425-92ed-8b78-e004484ff189","5130463d-71e4-48dd-2d42-403515b56fc9","d3826aa4-c8fe-ef10-cb27-90a8efcba3ae","d3826aa4-c8fe-ef10-cb27-90a8efcba3af","c87f9757-0bde-9317-8a14-93adbf97e7e4","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f8","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f9"],"origin":null,"selector":null},{"_id":"90705d1f-1425-92ed-8b78-e004484ff189","fake":false,"type":"class","name":"margin-small","namespace":"","comb":"&","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"ed4fc315-d502-be68-1704-80cb18bc53a5","fake":false,"type":"class","name":"guest blog","namespace":"","comb":"&","styleLess":"color: #404040; font-size: 1.1rem; line-height: 1.3em;","variants":{"tiny":{"styleLess":"font-size: 1.1rem;"}},"children":["ed4fc315-d502-be68-1704-80cb18bc53a7"],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e258a4","fake":false,"type":"class","name":"max-width-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 48rem;","variants":{},"children":["a321b37e-da8c-043e-fda6-c052fe38ecd1","a03b952b-2c37-583f-0999-1f1fce695eb6","5130463d-71e4-48dd-2d42-403515b56fc8","eff43235-dbf9-cd4a-7730-fb1422700876","ac3c774d-19da-d2a3-c1df-058aae5c7635","5546765d-a18f-f16d-cfad-aea399a9632d","896b788e-9a49-3060-6439-3ea4dd70e6b3","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f7","5ba3c36e-3768-1e33-9026-50dce2e21943","bbbca8ba-198b-590d-c624-36baebc70264"],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// Paste in head tag
<!-- Include stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />// Paste in body tag
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<!-- Quilljs script -->
<script>
const toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
['link', 'image', 'video', 'formula'], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'align': [] }], // remove formatting button
['clean']
];
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions,},
placeholder: "Enter details"
});
</script>