Merge branch 'dev-docs' into docs

imzbf · Aug 19, 2024 · 5a5b207 · 5a5b207
2 parents bd499d2 + ddf7c02
commit 5a5b207
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 190 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-editor-v3",
-  "version": "4.18.1",
+  "version": "4.19.0",
   "keywords": [
     "vue",
     "vue3",
@@ -34,13 +34,14 @@
   },
   "dependencies": {
     "@vavt/cm-extension": "^1.4.2",
-    "@vavt/v3-extension": "^1.2.3",
+    "@vavt/message": "^2.0.0",
+    "@vavt/v3-extension": "^1.3.0",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-mark": "^4.0.0",
-    "md-editor-v3": "^4.18.1",
+    "md-editor-v3": "^4.19.0",
     "nprogress": "^0.2.0",
     "vue": "3.2.47",
     "vue-router": "^4.3.0",

diff --git a/public/demo-en-US.md b/public/demo-en-US.md
@@ -78,7 +78,9 @@ export default defineComponent({
   name: 'MdEditor',
   setup() {
     const text = ref('');
-    return () => <MdEditor modelValue={text.value} onChange={(v) => (text.value = v)} />;
+    const onChange = (v) => (text.value = v);
+
+    return () => <MdEditor modelValue={text.value} onChange={onChange} />;
   }
 });
 ```
@@ -104,7 +106,15 @@ const scrollElement = document.documentElement;
 
 When using server-side rendering, `scrollElement` should be of string type, eg: `body`, `#id`, `.class`.
 
-## 🥂 Api Usage
+## 🎛 Used in Web Component
+
+Complete example reference [the sample project](https://github.com/imzbf/md-editor-v3/tree/main/example/webComponent) provided in the source code.
+
+Here are the precautions:
+
+1. The image zoom-in view feature is ineffective; implementation needs to be done manually!!!
+2. Do not use CDN to reference dependency libraries by default; refer to [[Import All Library]](https://imzbf.github.io/md-editor-v3/en-US/demo#%F0%9F%99%8D%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F%20Import%20All%20Library)!!!
+3. Only font-class type icons can be used; the default symbol type is ineffective!!!## 🥂 Api Usage
 
 Usages of some APIs.
 
@@ -717,7 +727,7 @@ To get complete code, refer to [docs](https://github.com/imzbf/md-editor-v3/blob
   --md-color: if(@isDark, #999, #222);
   --md-hover-color: if(@isDark, #bbb, #000);
   --md-bk-color: if(@isDark, #000, #fff);
-  --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
+  --md-bk-color-outstand: if(@isDark, #333, #f2f2f2);
   --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
   --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
   --md-border-hover-color: if(@isDark, #636262, #b9b9b9);

diff --git a/public/demo-zh-CN.md b/public/demo-zh-CN.md
@@ -78,9 +78,9 @@ export default defineComponent({
   name: 'MdEditor',
   setup() {
     const text = ref('');
-    return () => (
-      <MdEditor modelValue={text.value} onChange={(v: string) => (text.value = v)} />
-    );
+    const onChange = (v: string) => (text.value = v);
+
+    return () => <MdEditor modelValue={text.value} onChange={onChange} />
   }
 });
 ```
@@ -107,6 +107,16 @@ const scrollElement = document.documentElement;
 
 当使用服务端渲染时，`scrollElement`应该是字符类型，例：`body`、`#id`、`.class`。
 
+## 🎛 Web Component中使用
+
+完整的示例参考源码中提供的[示例项目](https://github.com/imzbf/md-editor-v3/tree/main/example/webComponent)
+
+下面是注意事项
+
+1. 内部的图片放大查看无效，需要自行实现！！！
+2. 不能默认的使用CDN引用依赖库，参考[[自行引入扩展库]](https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%99%8D%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F%20%E8%87%AA%E8%A1%8C%E5%BC%95%E5%85%A5%E6%89%A9%E5%B1%95%E5%BA%93)！！！
+3. 只能使用font-class引用的图标，默认的symbol引用无效！！！
+
 ## 🥂 扩展功能
 
 这里包含了一些编辑器`api`的使用示范
@@ -723,7 +733,7 @@ const toolbars = ['italic', 'underline', '-', 'bold', '=', 'github'];
   --md-color: if(@isDark, #999, #222);
   --md-hover-color: if(@isDark, #bbb, #000);
   --md-bk-color: if(@isDark, #000, #fff);
-  --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
+  --md-bk-color-outstand: if(@isDark, #333, #f2f2f2);
   --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
   --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
   --md-border-hover-color: if(@isDark, #636262, #b9b9b9);
@@ -790,16 +800,22 @@ import highlight from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
 
 // <3.0
-import prettier from 'prettier';
-import parserMarkdown from 'prettier/parser-markdown';
+// import prettier from 'prettier';
+// import parserMarkdown from 'prettier/parser-markdown';
 // >=3.0
 import * as prettier from 'prettier';
 import parserMarkdown from 'prettier/plugins/markdown';
 
+// 1. symbol引用
 // ${iconfontSvgUrl}
 import './assets/iconfont.js';
+// 2. font-class引用
+// ${iconfontClassUrl}
+import './assets/iconfont.css';
 
 config({
+  // font-class引用
+  // iconfontType: 'class',
   editorExtensions: {
     prettier: {
       prettierInstance: prettier,
@@ -824,6 +840,8 @@ config({
 });
 ```
 
+App.vue
+
 ```vue
 <template>
   <MdEditor v-model="text" noIconfont />

diff --git a/public/doc-en-US.md b/public/doc-en-US.md
@@ -575,7 +575,13 @@ Except for the same as `MdPreview`:
   Preset the size of the table, [columns, rows, Maximum number of columns, Maximum number of rows]
 
   ```vue
-  <MdEditor :tableShape="[8, 4]" />
+  <template>
+    <MdEditor :tableShape="tableShape" />
+  </tempale>
+
+  <script setup>
+  const tableShape = [8, 4];
+  </script>
   ```
 
   ![Preview](https://imzbf.github.io/md-editor-v3/imgs/20211216165424.png)
@@ -784,11 +790,13 @@ Custom toolbar in `DropdownToolbar`, `NormalToolbar` or `ModalToolbar`.
   import { MdEditor, NormalToolbar } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const toolbars = ['bold', '-', 0, '=', 'github'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          toolbars={['bold', '-', 0, '=', 'github']}
+          toolbars={toolbars}
           defToolbars={
             <>
               <NormalToolbar
@@ -843,11 +851,13 @@ For more info, Get **Internal Components** heading. Get source code of **mark**,
   import { MdEditor } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          footers={['markdownTotal', 0, '=', 1, 'scrollSwitch']}
+          footers={footers}
           defFooters={
             <>
               <span>￥_￥</span>
@@ -1733,6 +1743,25 @@ config({
 
 ---
 
+### 🔧 katexConfig
+
+Configure `katex`, [Details](https://katex.org/docs/options)
+
+```js
+import { config } from 'md-editor-v3';
+
+config({
+  katexConfig(base: any) {
+    return {
+      ...base,
+      strict: false
+    };
+  }
+});
+```
+
+---
+
 ## 🪡 Shortcut keys
 
 !!! warning Pay attention
@@ -1850,7 +1879,7 @@ const handler = () => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1864,6 +1893,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```
 
@@ -1956,7 +1986,7 @@ const handler = (emoji: any) => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1970,6 +2000,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```
 
@@ -2069,7 +2100,7 @@ const handler = () => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -2083,6 +2114,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```
 

diff --git a/public/doc-zh-CN.md b/public/doc-zh-CN.md
@@ -575,7 +575,13 @@
   标题栏添加表格时，预设待选表格大小，第一个代表最大列数，第二个代表最大行数，第三个代表扩展最大列数，第四个代表扩展最大行数。
 
   ```vue
-  <MdEditor :tableShape="[8, 4]" />
+  <template>
+    <MdEditor :tableShape="tableShape" />
+  </tempale>
+
+  <script setup>
+  const tableShape = [8, 4];
+  </script>
   ```
 
   ![表格预设大小预览](https://imzbf.github.io/md-editor-v3/imgs/20211216165424.png)
@@ -791,11 +797,13 @@
   import { MdEditor, NormalToolbar } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const toolbars = ['bold', '-', 0, '=', 'github'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          toolbars={['bold', '-', 0, '=', 'github']}
+          toolbars={toolbars}
           defToolbars={
             <>
               <NormalToolbar
@@ -804,7 +812,7 @@
                     <use xlinkHref="#icon-strike-through" />
                   </svg>
                 }
-              ></NormalToolbar>
+              />
             </>
           }
         />
@@ -853,11 +861,13 @@
   import { MdEditor } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          footers={['markdownTotal', 0, '=', 1, 'scrollSwitch']}
+          footers={footers}
           defFooters={
             <>
               <span>￥_￥</span>
@@ -1754,6 +1764,25 @@ config({
 
 ---
 
+### 🔧 katexConfig
+
+katex 配置项，[配置详情](https://katex.org/docs/options)
+
+```js
+import { config } from 'md-editor-v3';
+
+config({
+  katexConfig(base: any) {
+    return {
+      ...base,
+      strict: false
+    };
+  }
+});
+```
+
+---
+
 ## 🪡 快捷键
 
 主要以`CTRL`搭配对应功能英文单词首字母，冲突项添加`SHIFT`，再冲突替换为`ALT`。
@@ -1871,7 +1900,7 @@ const handler = () => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1885,6 +1914,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```
 
@@ -1977,7 +2007,7 @@ const handler = (emoji: any) => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1991,6 +2021,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```
 
@@ -2090,7 +2121,7 @@ const handler = () => {
 
 ```vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -2104,6 +2135,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 </script>
 ```