Quick start

  • Install guppy with

    npm install guppy-js

  • Include guppy.min.js and guppy-default.min.css in your page:

    <link rel="stylesheet" href="/node_modules/guppy-js/style/guppy-default.min.css">
<script type="text/javascript" src="/node_modules/guppy-js/guppy.min.js"></script>

  • Initialise an instance of the editor with the ID of a div that you want to be turned into the editor.

    var g1 = new Guppy("guppy1");
  • Optionally, configure editors to taste:
    • Use Guppy.configure to adjust settings for all Guppy instances
    • Use g1.configure to adjust settings just for this one instance.
    • Use Guppy.event set an event handler for events on all editors.
    • Use g1.event to set an event handler for this specific instance.

  • Putting it all together for a complete basic example:

    <!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/node_modules/guppy-js/style/guppy-default.min.css">
    <script type="text/javascript" src="/node_modules/guppy-js/guppy.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var g1 = new Guppy("guppy1");
        }
    </script>
</head>

<body>
    <div id="guppy1" style="width:400px;"></div>
</body>

</html>