lakelib 0.0.1 → 0.0.2
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 +54 -3
- package/dist/codemirror.min.js +1 -1
- package/dist/lake-all.css +3 -0
- package/dist/lake-all.min.js +4 -4
- package/dist/lake.css +3 -0
- package/dist/lake.min.js +5 -5
- package/lib/lake.css +3 -0
- package/lib/lake.js +14 -11
- package/lib/types/codemirror.d.ts +5 -8
- package/lib/types/ui/toolbar.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,11 +2,62 @@
|
|
|
2
2
|
|
|
3
3
|
# Lake
|
|
4
4
|
|
|
5
|
-
Lake is a
|
|
5
|
+
Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
|
|
6
6
|
|
|
7
7
|
### Getting Started
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
#### Downloading Lake from CDN
|
|
10
|
+
|
|
11
|
+
Compressed copies of Lake files are available, you can download them from jsDelivr or UNPKG.
|
|
12
|
+
|
|
13
|
+
* jsDelivr: https://www.jsdelivr.com/package/npm/lakelib?path=dist&tab=files
|
|
14
|
+
* UNPKG: https://unpkg.com/browse/lakelib@latest/dist/
|
|
15
|
+
|
|
16
|
+
Note: `lake-all.css` and `lake-all.min.js` are built with CodeMirror and PhotoSwipe, so they are very convenient to use. But if you have already imported these libraries in your page, then it is not the best approach, you had better use `lake.css` and `lake.min.js`, which are without large third-party libraries. To find out more, take a look at the [IIFE example](https://github.com/lakejs/lake/blob/master/examples/iife.html) and [Rollup configuration](https://github.com/lakejs/lake/blob/master/rollup.config.mjs).
|
|
17
|
+
|
|
18
|
+
#### Downloading Lake using npm
|
|
19
|
+
|
|
20
|
+
Lake is registered as a package on npm. You can install the latest version of Lake with the following npm command.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install lakelib
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
#### Quick start
|
|
27
|
+
|
|
28
|
+
First, add the following lines of code in the `<head>` of an HTML page.
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake-all.css" />
|
|
32
|
+
<script src="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake-all.min.js"></script>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Then, in the HTML page add the following HTML code that will serve as a placeholder for an editor instance.
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<div class="lake-editor">
|
|
39
|
+
<div class="lake-toolbar-root"></div>
|
|
40
|
+
<div class="lake-root"></div>
|
|
41
|
+
</div>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Finally, call the following JavaScript code to render the editor.
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
const editor = new Lake.Editor({
|
|
48
|
+
root: '.lake-root',
|
|
49
|
+
value: '<p><br /><focus /></p>',
|
|
50
|
+
});
|
|
51
|
+
editor.render();
|
|
52
|
+
new Lake.Toolbar({
|
|
53
|
+
editor,
|
|
54
|
+
root: '.lake-toolbar-root',
|
|
55
|
+
}).render();
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Development
|
|
59
|
+
|
|
60
|
+
First, you need to clone the repository and install all necessary dependencies. Then, start a composite server that contains an HTTP service and real-time bundling.
|
|
10
61
|
|
|
11
62
|
``` bash
|
|
12
63
|
# clone the repository
|
|
@@ -21,7 +72,7 @@ pnpm build
|
|
|
21
72
|
pnpm start
|
|
22
73
|
```
|
|
23
74
|
|
|
24
|
-
You can now view all demos by
|
|
75
|
+
You can now view all demos by visiting `http://localhost:8080/examples/`.
|
|
25
76
|
|
|
26
77
|
### Running tests
|
|
27
78
|
|