roosterjs 8.56.0 → 8.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -66
- package/dist/rooster-amd-min.js +1 -1
- package/dist/rooster-amd-min.js.map +1 -1
- package/dist/rooster-amd.d.ts +199 -18
- package/dist/rooster-amd.js +563 -140
- package/dist/rooster-amd.js.map +1 -1
- package/dist/rooster-min.js +1 -1
- package/dist/rooster-min.js.map +1 -1
- package/dist/rooster.d.ts +199 -18
- package/dist/rooster.js +563 -140
- package/dist/rooster.js.map +1 -1
- package/lib/createEditor.d.ts +1 -1
- package/lib/createEditor.js +1 -1
- package/lib/createEditor.js.map +1 -1
- package/lib-amd/createEditor.d.ts +1 -1
- package/lib-amd/createEditor.js +1 -1
- package/lib-amd/createEditor.js.map +1 -1
- package/lib-mjs/createEditor.d.ts +1 -1
- package/lib-mjs/createEditor.js +1 -1
- package/lib-mjs/createEditor.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -128,81 +128,36 @@ In order to run the code below, you may also need to install [webpack](https://w
|
|
|
128
128
|
|
|
129
129
|
### A quick start
|
|
130
130
|
|
|
131
|
-
1. Create `editor.htm` contains a DIV with some styles, and a reference to
|
|
132
|
-
.js file:
|
|
131
|
+
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):
|
|
133
132
|
|
|
134
133
|
```html
|
|
135
134
|
<html>
|
|
136
135
|
<body>
|
|
137
|
-
<div
|
|
138
|
-
id="editorDiv"
|
|
139
|
-
style="width: 500px; height: 300px; overflow: auto;
|
|
140
|
-
border: solid 1px black"
|
|
141
|
-
></div>
|
|
142
|
-
<script src="editor.js"></script>
|
|
143
|
-
</body>
|
|
144
|
-
</html>
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
2. Create `source.js` to import roosterjs and create an editor:
|
|
148
|
-
|
|
149
|
-
```javascript
|
|
150
|
-
var roosterjs = require('roosterjs');
|
|
151
|
-
var editorDiv = document.getElementById('editorDiv');
|
|
152
|
-
var editor = roosterjs.createEditor(editorDiv);
|
|
153
|
-
editor.setContent('Welcome to <b>RoosterJs</b>!');
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
3. Compile the javascript file using webpack:
|
|
157
|
-
|
|
158
|
-
`webpack source.js editor.js`
|
|
159
|
-
|
|
160
|
-
4. Navigate to editor.htm, you will see a editor shown in the page.
|
|
161
|
-
|
|
162
|
-
### Add some format buttons
|
|
163
|
-
|
|
164
|
-
1. Add some buttons into `editor.htm`:
|
|
165
|
-
|
|
166
|
-
```html
|
|
167
|
-
<html>
|
|
168
|
-
<body>
|
|
169
|
-
<div
|
|
170
|
-
id="editorDiv"
|
|
171
|
-
style="width: 500px; height: 300px; overflow: auto;
|
|
172
|
-
border: solid 1px black"
|
|
173
|
-
></div>
|
|
136
|
+
<div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
|
|
174
137
|
<button id="buttonB">B</button> <button id="buttonI">I</button>
|
|
175
138
|
<button id="buttonU">U</button>
|
|
176
|
-
<script src="
|
|
139
|
+
<script src="rooster.js"></script>
|
|
140
|
+
<script>
|
|
141
|
+
var contentDiv = document.getElementById('contentDiv');
|
|
142
|
+
var editor = roosterjs.createEditor(contentDiv);
|
|
143
|
+
|
|
144
|
+
editor.setContent('Welcome to <b>RoosterJs</b>!');
|
|
145
|
+
document.getElementById('buttonB').addEventListener('click', function () {
|
|
146
|
+
roosterjs.toggleBold(editor);
|
|
147
|
+
});
|
|
148
|
+
document.getElementById('buttonI').addEventListener('click', function () {
|
|
149
|
+
roosterjs.toggleItalic(editor);
|
|
150
|
+
});
|
|
151
|
+
document.getElementById('buttonU').addEventListener('click', function () {
|
|
152
|
+
roosterjs.toggleUnderline(editor);
|
|
153
|
+
});
|
|
154
|
+
</script>
|
|
177
155
|
</body>
|
|
178
156
|
</html>
|
|
179
157
|
```
|
|
180
158
|
|
|
181
|
-
2.
|
|
182
|
-
|
|
183
|
-
```javascript
|
|
184
|
-
var roosterjs = require('roosterjs');
|
|
185
|
-
var editorDiv = document.getElementById('editorDiv');
|
|
186
|
-
var editor = roosterjs.createEditor(editorDiv);
|
|
187
|
-
editor.setContent('Welcome to <b>RoosterJs</b>!');
|
|
188
|
-
|
|
189
|
-
document.getElementById('buttonB').addEventListener('click', function () {
|
|
190
|
-
roosterjs.toggleBold(editor);
|
|
191
|
-
});
|
|
192
|
-
document.getElementById('buttonI').addEventListener('click', function () {
|
|
193
|
-
roosterjs.toggleItalic(editor);
|
|
194
|
-
});
|
|
195
|
-
document.getElementById('buttonU').addEventListener('click', function () {
|
|
196
|
-
roosterjs.toggleUnderline(editor);
|
|
197
|
-
});
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
3. Compile the javascript file using webpack:
|
|
201
|
-
|
|
202
|
-
`webpack source.js editor.js`
|
|
203
|
-
|
|
204
|
-
4. Navigate to editor.htm, you will see buttons with bold, italic, underline
|
|
205
|
-
actions in the page.
|
|
159
|
+
2. Navigate to editor.htm, you will see a editor shown in the page which includes buttons with bold, italic, underline
|
|
160
|
+
actions.
|
|
206
161
|
|
|
207
162
|
## Sample code
|
|
208
163
|
|
|
@@ -292,7 +247,7 @@ Currently we have very few external dependencies. Before adding any new dependen
|
|
|
292
247
|
If you still feel a new dependency is required after checking these questions, we can review it and
|
|
293
248
|
finally decide whether we should add the new dependency.
|
|
294
249
|
|
|
295
|
-
For build time dependencies, it is more
|
|
250
|
+
For build time dependencies, it is more flexible to add new dependencies since it won't increase runtime
|
|
296
251
|
code size or dependencies.
|
|
297
252
|
|
|
298
253
|
## More documentation
|