From f52e0fedcaf3f4df96f9562a32f36f7a65b3b809 Mon Sep 17 00:00:00 2001 From: Geoff Scholl Date: Thu, 12 Oct 2023 13:58:40 -0400 Subject: [PATCH] Update README.md https://github.com/microsoft/roosterjs/issues/2135 --- README.md | 91 ++++++++++++++----------------------------------------- 1 file changed, 23 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 94ea034be6a..bf689fa84c6 100644 --- a/README.md +++ b/README.md @@ -128,81 +128,36 @@ In order to run the code below, you may also need to install [webpack](https://w ### A quick start -1. Create `editor.htm` contains a DIV with some styles, and a reference to a - .js file: +1. Create `editor.htm` which contains a DIV with some styles, buttons to handle some click events and a reference to rooster.js (update with the path to your rooster.js file): ```html - -
- - - -``` - -2. Create `source.js` to import roosterjs and create an editor: - -```javascript -var roosterjs = require('roosterjs'); -var editorDiv = document.getElementById('editorDiv'); -var editor = roosterjs.createEditor(editorDiv); -editor.setContent('Welcome to RoosterJs!'); -``` - -3. Compile the javascript file using webpack: - -`webpack ./source.js editor.js` - -4. Navigate to editor.htm, you will see a editor shown in the page. - -### Add some format buttons - -1. Add some buttons into `editor.htm`: - -```html - - -
- + +
+ - - + + + ``` -2. Add code to `source.js` to handle click event of the buttons: - -```javascript -var roosterjs = require('roosterjs'); -var editorDiv = document.getElementById('editorDiv'); -var editor = roosterjs.createEditor(editorDiv); -editor.setContent('Welcome to RoosterJs!'); - -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); -}); -``` - -3. Compile the javascript file using webpack: - -`webpack source.js editor.js` - -4. Navigate to editor.htm, you will see buttons with bold, italic, underline - actions in the page. +2. Navigate to editor.htm, you will see a editor shown in the page which includes buttons with bold, italic, underline + actions. ## Sample code