UNPKG

soocrate-core

Version:

this is the core of soocrate application

104 lines (91 loc) 5.74 kB
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl"> <title data-ice="title">Home | jquery-crate</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="jquery-crate"><meta property="twitter:description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/haouarin/jquery-crate.git"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/view/marker.js~Marker.html">Marker</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Editor">Editor</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-LinkView">LinkView</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-StatesHeader">StatesHeader</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="jquery-crate">jquery-crate</h1><p>&lt;i&gt;Keywords: jQuery plugin, distributed, decentralized, collaborative editor &lt;/i&gt;</p> <p>The project aims to create a very easy-to-integrate distributed collaborative editor directly inside your web pages.</p> <h1 id="usage">Usage</h1><h2 id="import">Import</h2><pre><code class="lang-html"><code class="source-code prettyprint">&lt;!-- #1 include style dependencies in the header //--&gt; &lt;link rel=&apos;stylesheet&apos; href=&apos;path/to/bootstrap.min.css&apos; /&gt; &lt;link rel=&apos;stylesheet&apos; href=&apos;path/to/font-awesome.min.css&apos; /&gt;</code> </code></pre> <pre><code class="lang-html"><code class="source-code prettyprint">&lt;!-- #1 include jquery, bootstrap, zeroclipboard, and the crate plugin //--&gt; &lt;script src=&apos;path/to/jquery.min.js&apos;&gt;&lt;/script&gt; &lt;script src=&apos;path/to/bootstrap.min.js&apos;&gt;&lt;/script&gt; &lt;script src=&apos;path/to/ZeroclipBoard.min.js&apos;&gt;&lt;/script&gt; &lt;script src=&apos;path/to/jquery-crate.min.js&apos;&gt;&lt;/script&gt;</code> </code></pre> <h2 id="instantiate">Instantiate</h2><pre><code class="lang-html"><code class="source-code prettyprint">&lt;!-- #2 create the division that will host the distributed editor //--&gt; &lt;div id=&apos;myDistributedEditor&apos;&gt;&lt;/div&gt;</code> </code></pre> <pre><code class="lang-javascript"><code class="source-code prettyprint">// #3A instantiate a new distributed editor into the targeted division. // options { // signalingOptions: configure the signaling service to join or share the // document. {address: http://example.of.signaling.service.address, // session: the-session-unique-identifier, // connect: true|false } // webRTCOptions: configure the STUN/TURN server to establish WebRTC // connections. // styleOptions: change the default styling options of the editor. // name: the name of the document // importFromJSON: the json object containing the aformentionned options plus // the saved sequence. If any of the other above options are specified, the // option in the json object are erased by them. $(&apos;#myDistributedEditor&apos;).cratify( options );</code> </code></pre> <h2 id="access">Access</h2><pre><code class="lang-javascript"><code class="source-code prettyprint">var editor = $(&apos;myDistributedEditor&apos;).cratify(args)[0]; // #4 access to the header object editor.header.prepend( newMenuButton1 ); editor.header.append( newMenuButton2 ); // #5 access to the underlying model of the distributed document var uid = editor.model.uid; var broadcast = editor.model.broadcast; // etc.</code> </code></pre> <h1 id="project">Project</h1><p>The project <a href="https://github.com/Chat-Wane/CRATE">CRATE</a> uses cratify to create its distributed editors.</p> <h1 id="contribute">Contribute</h1><p>Developers are very welcome to contribute!</p> <p>Do not hesitate to request features or to report bugs!</p> </div> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.0.4)</span><img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>