Quill: Add simple example for "save"

[kristofer]

I know, I know, but if we had a simple example of how to hook such a fine piece of work into simple HTTP get and post, well, we'd pick up a bunch of coders who need just a little more hand-holding - like me.

This is what I did.
Added a JS function post() to the portion of the page template where the JS goes.

    <!-- This is the JS portion -->
    <script type="text/javascript" src="/js/quill.js"></script>
    <script type="text/javascript">
      var editor = new Quill('#editor-container', {
        modules: {
          'toolbar': { container: '#formatting-container' },
          'image-tooltip': true,
          'link-tooltip': true
        }
      });
      editor.on('selection-change', function(range) {
        console.log('selection-change', range)
      });
      editor.on('text-change', function(delta, source) {
        console.log('text-change', delta, source)
      });
    function post() {
      method = "post"; 

      var form = document.createElement("form");
      form.setAttribute("method", method);
      form.setAttribute("action", "");

      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", "contents");
      hiddenField.setAttribute("value", editor.getHTML());

      form.appendChild(hiddenField);

      document.body.appendChild(form);
      form.submit();
    }
    </script>

I added the post() JS script.

and then added (in Martini of Golang fame.)

// inside of the server code for my sample app, I need to handle GET/POST
// (part of server.go)
    server.Get("/edit", func(r render.Render) {
        contents := ""
        // I would fetch what I wanted to edit here 
        // and assign it to 'contents' (a string)
        r.HTML(200, "editorTemplate", template.HTML(string(contents)))
    })

    server.Post("/edit", func(r render.Render, resp http.ResponseWriter, req *http.Request) {
        contents := req.FormValue("contents")
        // I would save the editor 'contents' here
        r.HTML(200, "editorTemplate", template.HTML(string(contents)))
    })

And yes, super simple. And then the simple "editorTemplate" (this is a std golang "html/template"

<!-- the HTML portion of the editor -->
    <div id="content-container">
      <div id="editor-wrapper">
        <div id="formatting-container">
    <select title="Size" class="sc-size">
      <option value="10px">Small</option>
      <option value="13px" selected="">Normal</option>
      <option value="18px">Large</option>
      <option value="32px">Huge</option>
    </select>
    <button class="sc-bold">Bold</button>
    <button class="sc-italic">Italic</button>
        </div>
        <div id="editor-container">
{{.}}
</div>
      </div>
<a href="javascript: post()">Save</a>

    </div>

the " {{.}} " is the portion of the template that my HTML "contents" gets laid into.

[jhchen]

We definitely need to add more examples and code snippets and this seems to be a common use case. Thank you for sharing!

[JustXtasy]

can you share the actual working project..? im having a hard time incorporating it in Asp MVC

[jhchen]

Actually here is a codepen demonstrating autosave: http://quilljs.com/playground/#autosave

[petrk94]

@jhchen
Hey, the demo is not working, any idea?

[jhchen]

Can you elaborate on the not working part? Are you getting an error?

[petrk94]

no, I just open the page, make a change in the text, wait few seconds and than click navigate away, come back, nothing got saved.
I would appreciate a really working tutorial how the save function work.
The HTML/CSS/JS code I have put in a html file and uploaded on my server, after reloading the page, nothing got saved and I dont get any error :/

[jhchen]

The code is not supposed to save -- it just demonstrates where the calls would go so please take a look at the code in that codepen to see. There are many backends and ways to communicate with a server but those are out of Quill's scope.

[petrk94]

ok, can you give me a link to a tutorial page how to learn to use the save function?
I suppose the example on codepen let people think that the example doesnt work, due its a "demo", I dont see that the demonstration work.

[dimes]

You shouldn't accept raw HTML from a client. This implementation is vulnerable to a XSS attack.