GithubHelp home page GithubHelp logo

mizzao / meteor-sharejs Goto Github PK

View Code? Open in Web Editor NEW
225.0 13.0 53.0 444 KB

Meteor smart package for transparently adding ShareJS editors to an app

License: MIT License

CSS 1.94% HTML 12.92% JavaScript 85.14%

meteor-sharejs's Introduction

meteor-sharejs

Meteor smart package for transparently adding ShareJS editors to an app. Includes CodeMirror and the Ace editor.

This package is only tested for meteor 1.3 or later

Install

For vanilla ShareJS with text only:

$ meteor add mizzao:sharejs

For ShareJS with the Ace editor

$ meteor add  mizzao:sharejs-ace

For ShareJS with the CodeMirror editor:

$ meteor add mizzao:sharejs-codemirror

Usage

No configuration necessary for anonymous document editing. If you want to integrate with Meteor accounts, see below.

Use this helper on the client to get a textarea with the specified docid (as an argument) and with a DOM id of "editor", for example:

{{> sharejsText docid=docid id="editor"}}

Use this helper to get an Ace editor. Make sure you specify a size (via CSS) on the #editor div or you won't see anything.

{{> sharejsAce docid=docid id="editor"}}

Use this helper to get a CodeMirror editor.

{{> sharejsCM docid=docid id="editor"}}

The templates will clean themselves up when re-rendered (i.e., you have several documents and docid changes.)

Client Configuration

For the Ace and CodeMirror editors, you can define onRender and onConnect callbacks in the options hash and use it to configure the editor. onRender is called when the editor is initially rendered, and onConnect is called after each successful connection to a document.

{{> sharejsAce docid=document onRender=config onConnect=setMode id="editor"}}

All standard Ace themes and extensions are supported. Note that the helper has to return a function inside of a function:

Template.foo.config = function () {
  return function(editor) {
    # Set some reasonable options on the editor
    editor.setTheme('ace/theme/monokai')
    editor.getSession().setMode('ace/mode/javascript')
    editor.setShowPrintMargin(false)
    editor.getSession().setUseWrapMode(true)
  }
};

Server Configuration

See this example config file for the various settings that you can use.

Persistence

By default, the documents and edit operations will be persisted in Meteor's Mongo database. Mongo is the recommended usage as you don't need a separate database and user integration is supported. "opsCollectionPerDoc": false can be useful to set if you don't want a separate ops collection for each document.

You can also use db.type of none to have all documents and operations in memory.

Meteor User-Accounts Integration

The Authorization was removed in version 0.9.0, because the current implementation did not added any security as Meteor.userId is not a secret token.

Advanced

You can access the ShareJS Server API via import { ShareJS } from 'meteor/mizzao:sharejs'. For example, you may want to delete documents ops when the document is deleted in your app. See the demo for an example.

Notes

  • When using the default mongo driver, you must not use collections called docs or ops. These are used by ShareJS.
  • It's best to create a Meteor.Collection for your documents which generates good unique ids to connect to ShareJS with. Use these to render the templates above. See the demo for examples.

Please submit pull requests for better features and cooperation!

Contributors

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.