docs: support document internationalization #222

* docs: add English docuemnt #213 * docs: support document internationalization #222 --------- Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>
2023-07-27 21:22:26 +08:00
parent fc356c7eb6
commit 9f8016884f
33 changed files with 2842 additions and 430 deletions
@@ -0,0 +1,95 @@
+# Getting Started
+
+> WYSIWYG rich text editor.
+
+Benefit from the complete self-implementation of cursor and text layout. The underlying rendering can also be rendered by svg, See code：[feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg); Or complete pdf drawing with pdfjs,See code：[feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf).
+
+::: warning
+The official only provides the editor core layer npm package, the menu bar or other external tools can refer to the document extension, or directly refer the implementation of [official](https://github.com/Hufe921/canvas-editor), See details [demo](https://hufe.club/canvas-editor/).
+:::
+
+## Features
+
+- Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Superscript, Alignment, Title, List, ...)
+- Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, content Block, ...)
+- Print (Based on canvas to picture, pdf drawing)
+- Controls (Radio, Text, Checkbox)
+- Right-click menu (Internal, Custom)
+- Shortcut keys (Internal, Custom)
+- Text, Element, Control drag and drop
+- Header, Footer, Page Number
+- Page Margin
+- Watermark
+- Pagination
+
+## TODO
+
+- Improve title and list functions
+- Computational performance
+- Control rule
+- Table paging
+- Out of the box version for vue, react and other frameworks
+
+## Step. 1: Download NPM Package
+
+```sh
+npm i @hufe921/canvas-editor --save
+```
+
+## Step. 2: Prepare Container
+
+```html
+<div class="canvas-editor"></div>
+```
+
+## Step. 3: Instantiate Editor
+
+- Examples that only the body content is included
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  [
+    {
+      value: 'Hello World'
+    }
+  ],
+  {}
+)
+```
+
+- Examples that contain body, header, footer content
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  {
+    header: [
+      {
+        value: 'Header',
+        rowFlex: RowFlex.CENTER
+      }
+    ],
+    main: [
+      {
+        value: 'Hello World'
+      }
+    ],
+    footer: [
+      {
+        value: 'canvas-editor',
+        size: 12
+      }
+    ]
+  },
+  {}
+)
+```
+
+## Step. 4: Configuration Editor
+
+See the next section for details