使用编辑器

components/Home/Blog/Markdown.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Editor } from '@bytemd/vue-next'
+import gfm from '@bytemd/plugin-gfm'
+
+const content = ref('')
+const plugins = [gfm()]
+const handleChange = (v: string) => {
+    content.value = v
+}
+</script>
+
+<template>
+    <Editor :value="content" :plugins="plugins" @change="handleChange" class="byteMd"/>
+</template>
+
+<style scoped lang="scss">
+.byteMd{
+    position: relative;
+    height: 100%;
+}
+</style>

docs/f01-mrkdown/01-marked.md

@@ -0,0 +1,66 @@
+`marked` 是一个流行的前端 Markdown 解析库，具有以下特色功能：
+
+> github star 34.5k
+> 
+> https://marked.js.org/
+> 
+> demo: 
+
+### 1. **轻量级**
+- `marked` 是一个非常轻量级的库，压缩后的文件大小通常只有几十 KB，适合在浏览器和 Node.js 环境中使用。
+
+### 2. **高性能**
+- `marked` 的解析速度非常快，能够在短时间内将 Markdown 文本转换为 HTML。它通过一次解析完成所有转换，避免了多次遍历的开销。
+
+### 3. **可扩展性**
+- `marked` 提供了丰富的 API，允许开发者自定义解析规则、渲染器、语法高亮等功能。你可以通过扩展或覆盖默认的渲染器来实现自定义的 Markdown 解析逻辑。
+
+### 4. **支持 CommonMark 和 GitHub Flavored Markdown (GFM)**
+- `marked` 支持 CommonMark 标准，并且还支持 GitHub Flavored Markdown (GFM)，包括表格、任务列表、自动链接等扩展语法。
+
+### 5. **语法高亮**
+- `marked` 内置支持语法高亮，可以通过配置使用 `highlight.js` 或其他语法高亮库来为代码块添加高亮效果。
+
+### 6. **异步渲染**
+- `marked` 支持异步渲染，允许在解析过程中执行异步操作（如获取远程资源），并返回 Promise 对象。
+
+### 7. **安全性**
+- `marked` 默认会对输出的 HTML 进行转义，防止 XSS（跨站脚本攻击）等安全问题。你可以通过配置禁用或自定义转义行为。
+
+### 8. **支持自定义 Tokenizer 和 Renderer**
+- `marked` 允许开发者自定义 Tokenizer 和 Renderer，从而可以灵活地处理 Markdown 中的各种元素。例如，你可以自定义如何渲染标题、链接、图片等。
+
+### 9. **支持插件**
+- `marked` 支持通过插件扩展功能，社区中有许多插件可以进一步增强 `marked` 的功能，如支持数学公式、流程图等。
+
+### 10. **跨平台**
+- `marked` 可以在浏览器和 Node.js 环境中使用，适用于各种前端和后端项目。
+
+### 11. **丰富的配置选项**
+- `marked` 提供了丰富的配置选项，允许开发者根据需要调整解析和渲染行为。例如，可以配置是否启用 GFM、是否自动生成锚点等。
+
+### 12. **良好的社区支持**
+- `marked` 拥有活跃的社区和丰富的文档，开发者可以轻松找到相关的教程、示例和插件。
+
+### 示例代码
+```javascript
+const marked = require('marked');
+
+// 基本用法
+const html = marked('# Hello, World!');
+console.log(html); // 输出: <h1>Hello, World!</h1>
+
+// 自定义渲染器
+const renderer = new marked.Renderer();
+renderer.heading = function (text, level) {
+  return `<h${level} class="custom-heading">${text}</h${level}>`;
+};
+
+marked.setOptions({ renderer });
+
+const customHtml = marked('# Custom Heading');
+console.log(customHtml); // 输出: <h1 class="custom-heading">Custom Heading</h1>
+```
+
+### 总结
+`marked` 是一个功能强大且灵活的 Markdown 解析库，适合各种需要 Markdown 解析的场景。它的高性能、可扩展性和丰富的功能使其成为前端开发者的首选工具之一。

docs/f01-mrkdown/02-markdown-it.md

@@ -0,0 +1,71 @@
+`markdown-it` 是另一个非常流行的前端 Markdown 解析库，具有以下特色功能：
+
+> github star 19.5
+> 
+> https://github.com/markdown-it/markdown-it
+
+### 1. **高度可配置**
+- `markdown-it` 提供了丰富的配置选项，允许开发者根据需要调整 Markdown 解析的行为。例如，可以启用或禁用特定的语法规则、调整解析器的行为等。
+
+### 2. **支持 CommonMark 和 GitHub Flavored Markdown (GFM)**
+- `markdown-it` 默认支持 CommonMark 标准，并且可以通过插件支持 GitHub Flavored Markdown (GFM)，包括表格、任务列表、删除线等扩展语法。
+
+### 3. **插件系统**
+- `markdown-it` 拥有强大的插件系统，社区中有大量的插件可以扩展其功能。例如，支持数学公式、流程图、脚注、表格等高级功能。
+
+### 4. **高性能**
+- `markdown-it` 的解析速度非常快，适合在浏览器和 Node.js 环境中使用。它通过高效的解析算法和优化，能够在短时间内处理大量的 Markdown 文本。
+
+### 5. **支持自定义渲染器**
+- `markdown-it` 允许开发者自定义渲染器，从而可以灵活地控制 Markdown 元素的输出格式。你可以根据需要覆盖默认的渲染逻辑，实现自定义的 HTML 输出。
+
+### 6. **支持语法高亮**
+- `markdown-it` 内置支持语法高亮，可以通过配置使用 `highlight.js` 或其他语法高亮库来为代码块添加高亮效果。
+
+### 7. **安全性**
+- `markdown-it` 默认会对输出的 HTML 进行转义，防止 XSS（跨站脚本攻击）等安全问题。你可以通过配置禁用或自定义转义行为。
+
+### 8. **支持异步渲染**
+- `markdown-it` 支持异步渲染，允许在解析过程中执行异步操作（如获取远程资源），并返回 Promise 对象。
+
+### 9. **跨平台**
+- `markdown-it` 可以在浏览器和 Node.js 环境中使用，适用于各种前端和后端项目。
+
+### 10. **良好的社区支持**
+- `markdown-it` 拥有活跃的社区和丰富的文档，开发者可以轻松找到相关的教程、示例和插件。
+
+### 11. **支持自定义 Tokenizer**
+- `markdown-it` 允许开发者自定义 Tokenizer，从而可以灵活地处理 Markdown 中的各种元素。例如，你可以自定义如何解析链接、图片等。
+
+### 12. **支持多语言**
+- `markdown-it` 支持多语言，可以通过插件支持不同语言的 Markdown 扩展语法。
+
+### 示例代码
+```javascript
+const MarkdownIt = require('markdown-it');
+const md = new MarkdownIt();
+
+// 基本用法
+const html = md.render('# Hello, World!');
+console.log(html); // 输出: <h1>Hello, World!</h1>
+
+// 使用插件
+const mdWithPlugins = new MarkdownIt()
+  .use(require('markdown-it-task-lists'))
+  .use(require('markdown-it-footnote'));
+
+const pluginHtml = mdWithPlugins.render('- [x] Task 1\n- [ ] Task 2');
+console.log(pluginHtml); // 输出: <ul class="contains-task-list"><li class="task-list-item"><input type="checkbox" checked="" disabled=""> Task 1</li><li class="task-list-item"><input type="checkbox" disabled=""> Task 2</li></ul>
+
+// 自定义渲染器
+const customRenderer = new MarkdownIt();
+customRenderer.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
+  return `<h${tokens[idx].hLevel} class="custom-heading">`;
+};
+
+const customHtml = customRenderer.render('# Custom Heading');
+console.log(customHtml); // 输出: <h1 class="custom-heading">Custom Heading</h1>
+```
+
+### 总结
+`markdown-it` 是一个功能强大且灵活的 Markdown 解析库，适合各种需要 Markdown 解析的场景。它的高度可配置性、插件系统和丰富的功能使其成为前端开发者的首选工具之一。

docs/f01-mrkdown/03-ByteMD.md

@@ -0,0 +1,3 @@
+> 字节的MarkDown
+> 
+> https://bytemd.js.org/

docs/f01-mrkdown/04-tiptap富文本.md

@@ -0,0 +1,3 @@
+> https://github.com/ueberdosis/tiptap
+> 
+> github star 30k

docs/f01-mrkdown/05-Quill富文本.md

@@ -0,0 +1,5 @@
+> https://github.com/slab/quill
+> 
+>  quilljs.com 
+> 
+> github star 45k

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
         '~/assets/css/iconfont.css',
         '~/assets/css/transitions.css',
         '~/assets/css/Ni.css',
+        'bytemd/dist/index.css', // byteMD 编辑器
     ],
     app: {
         head: {

package.json

@@ -14,7 +14,10 @@
     "sqlV": "drizzle-kit studio"
   },
   "dependencies": {
+    "@bytemd/plugin-gfm": "^1.22.0",
+    "@bytemd/vue-next": "^1.22.0",
     "@nuxt/eslint": "^1.3.0",
+    "bytemd": "^1.22.0",
     "consola": "^3.4.2",
     "dayjs": "^1.11.13",
     "drizzle-orm": "^0.42.0",

pages/home/blog.vue

@@ -169,20 +169,32 @@ const handleCreateBlogMenuItemAck = async () => {
         niMessage.success('创建博客成功!');
         blogInfoPopupStatus.value = false;
         const father = blogMenuIdMap.value.get(insertBlogMenuPid.value);
-        resd.rank = father.rank + 1;
         resd.opne = false;
         resd.openNumber = 0;
         resd.childrenLength = 0;
-        father.childrenLength ++;
         blogMenuIdMap.value.set(resd.id, resd)
-        const pidMap = blogMenuPidMap.value.get(father.id)
+        let pidMap
-        pidMap.push(resd)
+        if(insertBlogMenuPid.value == '0'){
-        if(father.open){
+            resd.rank = 0;
+            pidMap = blogMenuPidMap.value.get('0')
+        }else{
+            resd.rank = father.rank + 1;
+            father.childrenLength = father.childrenLength + 1;
+            pidMap = blogMenuPidMap.value.get(father.id)
+        }
+        if(pidMap){
+            pidMap.push(resd)
+        }else{
+            blogMenuPidMap.value.set(father.id, [resd])
+        }
+        if(father?.open){
             const openNumber = father.openNumber
             changeParentOpenNumber(father, 1, '+');
             const insertIndex = blogMenuList.value.findIndex(i => i.id === father.id)
             father.openNumber =  father.openNumber + openNumber
             blogMenuList.value.splice(insertIndex + father.openNumber, 0, resd);
+        }else if(insertBlogMenuPid.value == '0'){
+            blogMenuList.value = blogMenuPidMap.value.get('0')
         }
     }
 }
@@ -258,8 +270,10 @@ onMounted(() => {
         height: 100%;
         overflow: auto;
         flex: 1;
+        display: flex;
         & > header{
             position: relative;
+            flex-shrink: 0;
             display: flex;
             height: 3rem;
             border-bottom: 1px solid var(--bg-color-be);
@@ -284,6 +298,12 @@ onMounted(() => {
                 }
             }
         }
+
+        & > main{
+            position: relative;
+            flex: 1;
+            overflow: hidden;
+        }
     }
 }
 @media (max-width: 767px){

pages/home/blog/[blogId].vue

@@ -3,11 +3,14 @@
 </script>
 
 <template>
-<div>
+<div class="BlogEntity">
-    ID {{$route.params.blogId}}
+    <HomeBlogMarkdown></HomeBlogMarkdown>
 </div>
 </template>
 
 <style scoped lang="scss">
-
+.BlogEntity{
+    position: relative;
+    height: 100%;
+}
 </style>