Skip to content

Preparation

Jump to bottom
Jiuqing Song edited this page Jan 24, 2018 · 8 revisions

Go back to Quick Start

Before start, let's see the different ways to use roosterjs. There are several ways to use RoosterJs, all of these ways have the same functionalities. You just need to pick one according to your project environment.

Use packed file

Under package roosterjs/dist, there are 8 files:

  1. rooster.js The packed code for roosterjs, contains all packages

  2. rooster.d.ts Type definition for rooster.js

  3. rooster.js.map Source map for rooster.js

  4. rooster-min.js Minified version of rooster.js

  5. rooster-amd.js The packed code for roosterjs, in AMD format

  6. rooster-amd.d.ts Type definition for rooster-amd.js

  7. rooster-amd.js.map Source map for rooster-amd.js

  8. rooster-amd-min.js Minified version of rooster-amd.js

Reference to rooster.js directly

It is a simple way to reference to rooster.js from HTML file directly, then you can reference to all roosterjs types/functions/classes via roosterjs object:

<html>
<body>
    <div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
    <script src="rooster.js"></script>
    <script>
    var contentDiv = document.getElementById("contentDiv");
    var editor = roosterjs.createEditor(contentDiv);
    </script>
</body>
</html>

Reference to rooster-amd.js using require

When working with NodeJs, you can use require to reference to rooster-amd.js:

var roosterjs = require("./rooster-amd.js");
var contentDiv = document.getElementById("contentDiv");
var editor = roosterjs.createEditor(contentDiv);

Reference to rooster-amd.js in typescript

With typescript, you can use import keyword to reference rooster-amd.js:

import * as RoosterJs from './rooster-amd';

let contentDiv = document.getElementById('contentDiv') as HTMLDivElement;
let editor = RoosterJs.createEditor(contentDiv);

Reference to rooster.js with /// 

/// <reference path="./rooster" />
let contentDiv = document.getElementById('contentDiv') as HTMLDivElement;
let editor = roosterjs.createEditor(contentDiv);

In this case you need to explicitly link to rooster.js in HTML file (Supporse your typescript file will be packed to editor.js):

<html>
<body>
    <div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
    <script src="rooster.js"></script>
    <script src="editor.js"></script>
</body>
</html>

Use NPM packages

When working with NodeJs, it is recommended to use NPM packages of roosterjs:

package.json:

{
  "name": "editor",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "roosterjs": "^6.4.1"
  }
}

typescript file:

import * as RoosterJs from 'roosterjs';

let contentDiv = document.getElementById("contentDiv") as HTMLDivElement;
let editor = RoosterJs.createEditor(contentDiv);
Clone this wiki locally