Add format buttons

Go back to How to use

RoosterJs is a framework-independnt javascript HTML editor, so it doesn't have any UI component such as format buttons. But it does provide the ability to do format operations. So what you need to do is to build your format bar UI base on any existing UI framework you are using in your project, and call format APIs from roosterJs in the event handlers of your UI components.

Format API

For a full list of the Format APIs, please click here.

Undo and Redo

Undo and Redo are very popular button in format bar. Their correlated APIs are not in roosterjs-editor-api package, but they are member function of Editor class directly. You can call editor.undo() and editor.redo() to perform these actions.

Example

Suppose we have below HTML code to build the format bar with 3 basic buttons: bold, italic, underline:

<div>
    <button id="bold"><b>B</b></button>
    <button id="italic"><i>I</i></button>
    <button id="underline"><u>U</u></button>
</div>

Then use the following javascript code to handle click event of these buttons. (rooster.js file is directly used in this example. Please reference to the first example in Preparation)

document.getElementById('bold').addEventListener('click', function() {
    roosterjs.toggleBold(editor);
});
document.getElementById('italic').addEventListener('click', function() {
    roosterjs.toggleItalic(editor);
});
document.getElementById('underline').addEventListener('click', function() {
    roosterjs.toggleUnderline(editor);
});

To add more buttons, you need to render more UI buttons and call the format APIs above.

RoosterJs-react example

roosterjs-react repository contains a react based roosterjs wrapper and some UI components including a format bar (a.k.a Ribbon). You can check out source code, compile and run its sample site to see how a Ribbon and other UI components are created based on react and roosterjs.