使用编辑器
This commit is contained in:
parent
d2d5dfa650
commit
3710642bc0
21
components/Home/Blog/Markdown.vue
Normal file
21
components/Home/Blog/Markdown.vue
Normal file
@ -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>
|
||||
66
docs/f01-mrkdown/01-marked.md
Normal file
66
docs/f01-mrkdown/01-marked.md
Normal file
@ -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 解析的场景。它的高性能、可扩展性和丰富的功能使其成为前端开发者的首选工具之一。
|
||||
71
docs/f01-mrkdown/02-markdown-it.md
Normal file
71
docs/f01-mrkdown/02-markdown-it.md
Normal file
@ -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 解析的场景。它的高度可配置性、插件系统和丰富的功能使其成为前端开发者的首选工具之一。
|
||||
3
docs/f01-mrkdown/03-ByteMD.md
Normal file
3
docs/f01-mrkdown/03-ByteMD.md
Normal file
@ -0,0 +1,3 @@
|
||||
> 字节的MarkDown
|
||||
>
|
||||
> https://bytemd.js.org/
|
||||
3
docs/f01-mrkdown/04-tiptap富文本.md
Normal file
3
docs/f01-mrkdown/04-tiptap富文本.md
Normal file
@ -0,0 +1,3 @@
|
||||
> https://github.com/ueberdosis/tiptap
|
||||
>
|
||||
> github star 30k
|
||||
5
docs/f01-mrkdown/05-Quill富文本.md
Normal file
5
docs/f01-mrkdown/05-Quill富文本.md
Normal file
@ -0,0 +1,5 @@
|
||||
> https://github.com/slab/quill
|
||||
>
|
||||
> quilljs.com
|
||||
>
|
||||
> github star 45k
|
||||
@ -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: {
|
||||
|
||||
1605
package-lock.json
generated
1605
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -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
|
||||
if(insertBlogMenuPid.value == '0'){
|
||||
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)
|
||||
if(father.open){
|
||||
}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){
|
||||
|
||||
@ -3,11 +3,14 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
ID {{$route.params.blogId}}
|
||||
<div class="BlogEntity">
|
||||
<HomeBlogMarkdown></HomeBlogMarkdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.BlogEntity{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user