A modern JavaScript WYSIWYG

project-showcase

Description

This demo and readme are designed to showcase Quill, a javascript WYSIWYG library.

Definitions

WYSIWYG

A what you see is what you get (WYSIWYG) editor, is an editor common in CMS's, document authoring systems etc. Any system where a user needs to input formatted text.

Quill

A WYSIWYG editor written in javascript, that is easy to implement and feature loaded. See their homepage, source and their documentation for more details. You can also visit their 'playground' here.

Note that the quill library is liscenced under BSD 3-clause and is also affiliated with salesforce.

Flask

A python web microframework, designed to build simple web apps. Check out their website, or the source.

Usage

The point of this demo is to show off quill, but you could also use this demo as a starting point to buid a proper app out of.

Requirements

For this demo you will need a few things, i've outlined the requirements below and how to set them up: 1. Flask: to get Flask you can either use pip install flask or in the folder with this readme run pip install -r requirements.txt 2. Quill: Since quill is being demoed here I have taken the liberty of setting it up in this demo. To use in your own projects you will need to download it here

Running

  1. Install the prerequisites found in the requirements section of this readme.
  2. Run the program using python routes.py.
  3. Open a web browser and go to http://localhost:5000

Whenever you hit submit you will see the output results in the terminal.

Real World Applications

The real world applications are somewhat endless, the quill website mentions linkedin, salesforce, slack and others.

Additional information

By default this demo is using the 'snow' teme for quill, check out some of the others here.

Files

routes_demo.py
from flask import Flask,redirect, render_template,request import os app = Flask(__name__, template_folder='static/templates') @app.route('/', methods=["GET", "POST"]) def home(): """Primary route handler, prints the contents out from the form submit on quill-demo.html""" if request.method == "POST": print("Heading: {}".format(request.form['Heading'])) print("Sub-Heading: {}".format(request.form['sub-heading'])) print("Category: {}".format(request.form['category'])) print("Content: {}".format(request.form['content'])) return render_template("quill-demo.html") if __name__ == '__main__': app.static_folder = 'static' # Allows absolute paths to folders inside /static app.run(host="0.0.0.0", port=5000)


{% extends "template.html" %} {% block page_title %} Primary Writing page {% endblock page_title %} {% block stylesheets %} <!--Import Quill Stylesheets--> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> {% endblock stylesheets %} {% block content %} <form class="form-horizontal" method="post"> <fieldset> <!-- Form Name --> <legend>Demo Authoring Page</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Heading">Heading</label> <div class="col-md-8"> <input id="Heading" name="Heading" type="text" placeholder="Heading text Here" class="form-control input-md" required=""> <span class="help-block">Enter Heading text here</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="sub-heading">Sub-Heading</label> <div class="col-md-8"> <input id="sub-heading" name="sub-heading" type="text" placeholder="Sub Heading Text here" class="form-control input-md" required=""> <span class="help-block">Enter Sub Heading Text above</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="category">Categorie(s)</label> <div class="col-md-8"> <input id="category" name="category" type="text" placeholder="Enter Category(s) Here" class="form-control input-md" required=""> <span class="help-block">Enter Category(s) above</span> </div> </div> <!--Div that will have quill injected into it--> <div id="editor" style="text-align: center; min-height: 800px;"> </div> <!--Hidden field to be filled with value from editor div on form submit--> <input type="hidden" id="content" name="content"> <!-- Submit Button --> <center> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-8"> <button id="submit" name="submit" class="btn btn-primary">Submit</button> </div> </div> </center> </fieldset> </form> {% endblock content %} </br> {% block scripts %} <!--Setting up quill editor--> <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <script> // Set up editing options available var toolbarOptions = [ [{ 'font': [] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', { 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], [{ 'background': [] }], ['clean'] ]; // Convert editor div to quill object var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions // Include button in toolbar }, theme: "snow" }); // Adds the content inside the quill editor to the form submit var form = document.querySelector('form'); form.onsubmit = function() { // Populate hidden form element on submit var content = document.querySelector('input[name=content]'); // Get content as HTML and fill content vakye wutg it content.value = quill.container.firstChild.innerHTML console.log("Submitted", $(form).serialize(), $(form).serializeArray()); }; </script> {% endblock scripts %}