Rooster is a framework-independent JavaScript rich-text editor neatly nested
inside one HTML <div> element. Editing operations performed by end users are
handled in simple ways to generate the final HTML.
To view the sample site, please click the link below:
Rooster contains 6 packages.
-
roosterjs: A facade of all Rooster code for those who want a quick start. Use thecreateEditor()function in roosterjs to create an editor with default configurations. -
roosterjs-editor-core: Defines the core editor and plugin infrastructure. Useroosterjs-editor-coreinstead ofroosterjsto build and customize your own editor. -
roosterjs-editor-api: Defines APIs for editor operations. Use these APIs to modify content and formatting in the editor you built usingroosterjs-editor-core. -
roosterjs-editor-dom: Defines APIs for DOM operations. Useroosterjs-editor-apiinstead unless you want to access DOM API directly. -
roosterjs-editor-plugins: Defines basic plugins for common features. Examples: making hyperlinks, pasting HTML content, inserting inline images. -
roosterjs-editor-types: Defines public interfaces and enumerations.
Rooster provides DOM level APIs (in roosterjs-editor-dom) and formatting APIs
(in roosterjs-editor-api) to perform editing operations.
roosterjs-editor-dom provides several levels of DOM operations:
- Perform basic DOM operations such as
fromHtml(),wrap(),unwrap(), ... - Wrap a given DOM node with
InlineElement orBlockElementand perform operations with DOM Walker API. - Perform DOM operations on a given scope using scopers.
- Travel among
InlineElementsandBlockElementswith scope using ContentTraverser API.
roosterjs-editor-api provides APIs for scenario-based operations triggered by
user interaction.
Rooster supports plugins. You can use built-in plugins or build your own. Plugins call APIs to communicate with the editor. When an operation is performed by the user or when content is changed by code, the editor will trigger events for the plugins to handle.
Here's a sample plugin which will show a dialog containing "Hello Rooster" when an "a" is typed in the editor:
class HelloRooster implements EditorPlugin {
initialize(editor: Editor) {}
dispose() {}
onPluginEvent(e: PluginEvent) {
if (e.eventType == PluginEventType.KeyPress && e.rawEvent.which == 65) {
alert('Hello Rooster');
}
}
}Install via NPM or Yarn:
yarn add roosterjs
or
npm install roosterjs --save
You can also install sub packages separately:
yarn add roosterjs-editor-core
yarn add roosterjs-editor-api
...
or
npm install roosterjs-editor-core --save
npm install roosterjs-editor-api --save
...
In order to run the code below, you may also need to install webpack:
yarn add webpack -g
or
npm install webpack -g
- Create
editor.htmcontains a DIV with some styles, and a reference to a .js file:
<html>
<body>
<div id='editorDiv' style='width: 500px; height: 300px; overflow: auto;
border: solid 1px black'></div>
<script src='editor.js'></script>
</body>
</html>- Create
source.jsto import roosterjs and create an editor:
var roosterjs = require('roosterjs');
var editorDiv = document.getElementById('editorDiv');
var editor = roosterjs.createEditor(editorDiv);
editor.setContent('Welcome to <b>RoosterJs</b>!');- Compile the javascript file using webpack:
webpack source.js editor.js
- Navigate to editor.htm, you will see a editor shown in the page.
- Add some buttons into
editor.htm:
<html>
<body>
<div id='editorDiv' style='width: 500px; height: 300px; overflow: auto;
border: solid 1px black'></div>
<button id='buttonB'>B</button>
<button id='buttonI'>I</button>
<button id='buttonU'>U</button>
<script src='editor.js'></script>
</body>
</html>- Add code to
source.jsto handle click event of the buttons:
var roosterjs = require('roosterjs');
var editorDiv = document.getElementById('editorDiv');
var editor = roosterjs.createEditor(editorDiv);
editor.setContent('Welcome to <b>RoosterJs</b>!');
document.getElementById('buttonB').addEventListener('click', function() {
roosterjs.toggleBold(editor);
});
document.getElementById('buttonI').addEventListener('click', function() {
roosterjs.toggleItalic(editor);
});
document.getElementById('buttonU').addEventListener('click', function() {
roosterjs.toggleUnderline(editor);
});- Compile the javascript file using webpack:
webpack source.js editor.js
- Navigate to editor.htm, you will see buttons with bold, italic, underline actions in the page.
To view the sample site, please click here.
To build the sample site code yourself, follow these instructions:
-
Get dependencies using yarn or npm:
yarn
or
npm install
-
Build the source code, and start the sample editor:
yarn startor
npm start -
Navigate to the sample editor at http://localhost:3000/
We are still working on more documentation in roosterjs wiki.
License Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent