Kirby Visual Markdown 编辑器使用教程

Kirby Visual Markdown 编辑器使用教程

kirby-visual-markdownVisual Markdown Editor for Kirby CMS 2项目地址:https://gitcode.com/gh_mirrors/ki/kirby-visual-markdown

项目介绍

Kirby Visual Markdown 是一个为 Kirby CMS 2 设计的可视化 Markdown 编辑器。它提供了丰富的功能，如 Markdown 和 Kirbytext 的高亮显示、上下文相关的格式切换、智能缩进、键盘快捷键、自定义工具栏按钮、自定义语法高亮等。此外，它还支持触摸设备，并具有出色的性能。

项目快速启动

安装

1. 克隆项目到本地：

   git clone https://github.com/JonasDoebertin/kirby-visual-markdown.git
   

2. 将项目文件复制到你的 Kirby CMS 项目目录中。

3. 在 Kirby CMS 的配置文件中启用插件：

   c::set('plugin.visual-markdown', true);
   

使用

1. 在你的 Kirby CMS 页面中添加 Markdown 字段：

   fields:
     content:
       label: Content
       type: markdown
   

2. 在模板文件中使用 Markdown 字段的内容：

   <?php echo $page->content()->kt(); ?>
   

应用案例和最佳实践

案例一：博客系统

在博客系统中使用 Kirby Visual Markdown 编辑器，可以方便地编辑和发布文章。通过自定义工具栏按钮和语法高亮，可以提高编辑效率。

案例二：文档管理系统

在文档管理系统中，Kirby Visual Markdown 编辑器可以用于编写和格式化技术文档。其上下文相关的格式切换功能使得文档编辑更加直观。

最佳实践

• 自定义工具栏：根据需求添加或删除工具栏按钮，以提高编辑效率。
• 语法高亮：配置自定义语法高亮，以适应特定的 Markdown 语法。
• 性能优化：利用 CodeMirror 6 的性能优势，确保在触摸设备上的流畅体验。

典型生态项目

Kirby CMS

Kirby CMS 是一个灵活的内容管理系统，支持自定义页面类型和字段。Kirby Visual Markdown 编辑器是其生态系统中的一个重要组成部分，提供了强大的 Markdown 编辑功能。

CodeMirror

CodeMirror 是一个用于浏览器的多功能文本编辑器组件，支持多种编程语言和标记语言。Kirby Visual Markdown 编辑器基于 CodeMirror 6 构建，提供了出色的性能和丰富的编辑功能。

ProseMirror

ProseMirror 是一个用于构建富文本编辑器的框架，提供了强大的文档模型和编辑功能。虽然 Kirby Visual Markdown 编辑器不是基于 ProseMirror 构建的，但两者在功能上有一定的重叠，可以相互借鉴。

kirby-visual-markdownVisual Markdown Editor for Kirby CMS 2项目地址:https://gitcode.com/gh_mirrors/ki/kirby-visual-markdown