Skip to content

Step By Step Pad Example

Jump to bottom Edit New page
Pablo Ojanguren edited this page Mar 20, 2017 · 1 revision

Pad Example

The following code illustrate how to add a real-time text editor (aka Pad) in your Web Site.

You can run this example without changes, since it will use the SwellRT Demo Server.

Enjoy it.

Summary of Steps

  1. Load the Client Script
  2. Register API Callbacks for Networking
  3. Open a Session
  4. Open a Collaborative Data Model & Run the Text Editor

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Add you favourite staff here-->
</head>
<body>

    <!-- You should add some CSS styles -->

    <!-- Where the Pad (text editor) will be rendered -->
    <div id="pad" class="pad"></div>

    <!-- A place to show API messages -->
    <div id="log" class="log"></div>




    <!--A little bit of jQuery makes life esier  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!--                           -->
    <!-- 1. Load the Client Script -->
    <!--                           -->

    <!-- You can use the SwellRT public demo server  -->
    <script src="http://demo.swellrt.org/swellrt/swellrt.nocache.js"></script>


    <script>


        //
        // 2. Register API Callbacks for Networking
        //
        function onSwellRTReady() {

             SwellRT.useWebSocket(true);

            SwellRT.on(SwellRT.events.NETWORK_CONNECTED, function() {            
                log("Network connected");
            });

            SwellRT.on(SwellRT.events.NETWORK_DISCONNECTED, function(data)   {
               log("Network disconnected "+data.cause);
            });           

            SwellRT.on(SwellRT.events.FATAL_EXCEPTION, function(data) {
                log("Exception "+data.cause);                
            });


            //
            // 3. Open a Session
            //
            SwellRT.startSession("http://demo.swellrt.org", SwellRT.user.ANONYMOUS, "" ,                 
                function(session) {                           
                     log("Session started");     

                    //
                    // 4. Open a Data Model / Run the Editor
                    //

                    // This is the Pad's document in the SwellRT public site
                    SwellRT.openModel("local.net/s+y7Ukjg1ktpA",

                        function(model) {
                            log("Model Opened")
                            _model = model;
                            _pad = SwellRT.editor("pad");
                            _pad.edit(_model.root.get("doc"));
                    });

                });

        }


        //
        // LOG
        //
        function log(message) {
            $('#log').append(message+"<br/>");
        }

    </script>

</body>

</html>

Texts and images of the SwellRT Wiki are released as open content, under the Creative Commons Attribution 4.0 International.

Clone this wiki locally