博客
关于我
菜鸟的markdown编辑器集成
阅读量:748 次
发布时间:2019-03-22

本文共 1490 字,大约阅读时间需要 4 分钟。

#菜鸟的Markdown编辑器集成

廿天来,我一直在寻找一款适合我使用的Markdown编辑器。经过一番调研,我找到一款非常不错的开源Markdown编辑器,这篇文章将记录我的学习和使用心得。

说明与下载

下载与安装

对于什么是Markdown编辑器以及其语法,这里就不做详细介绍了。我们直接来看如何下载和安装这款编辑器。

下载包

下载包通常包括一个开源的代码仓库。这需要将它加入到你的项目中,这样你就可以体验这款优秀的编辑器了。下载时注意选择正确的版本,如果是Windows系统,可以选择对应的安装包。

使用说明

这款Markdown编辑器具有友好的界面和强大的功能。新手也能快速上手。以下是主要使用方法:

Basic Usage

打开Markdown编辑器,创建一个新文档。你可以直接在编辑器中输入Markdown语法,或者选择从文件加载现有的文档。

代码示例

这里展示一个简单的代码示例:

    Markdown Editor    

Markdown编辑器支持多种语法特性。在线示例和更多功能可以在官方文档中找到。

案例集成

为了更好地理解这款编辑器,我决定将它集成到一个小项目中。我生成了一个简单的博客系统,分为两个页面:编辑页面和博客详情页面。以下是关键步骤:

项目结构

创建一个/static/lib/editormd文件夹,将编辑器的JavaScript和样式文件放入该目录。在你的页面模板中引入相应的资源,可通过如下方式实现:

前端与后端集成

在前端部分,最重要的是初始化编辑器。以下是一个简单的代码示例如下:

$(document).ready(function() {    var editor = editormd('editor', {        // 参数配置        width: '100%',        height: '400px',        syncScrolling: 'single'    });});

在后端部分,我们需要处理Markdown格式的转换和保存。推荐使用CommonMark库,可以通过如下方式进行转换:

public static String markdownToHtml(String markdown) {    Parser parser = Parser.builder().build();    Node document = parser.parse(markdown);    HtmlRenderer renderer = HtmlRenderer.builder().build();    return renderer.render(document);}

工具与资源

关键工具

  • CommonMark:Markdown转HTML的核心工具。
  • Editormd:一款温馨的Markdown编辑器,高度可定制,适合开发者使用。

必要资源

  • CSS文件:需要将库中的CSS文件加到你的页面中。
  • JavaScript文件:同样需要在页面中引入editormd的脚本文件。

注意事项

在使用过程中,需要注意以下几点:

  • 兼容性:确保编辑器与你的项目框架兼容。
  • 服务器配置:如果是部署在服务器上的应用,记得配置好静态资源访问权限。
  • 频率 enh:持续更新文档和功能建议,可以通过项目的GitHub仓库进行反馈和讨论。
  • 集合了以上方法和经验,这款Markdown编辑器已经成为我开发过程中的得力助手。希望能为其他开发者提供有价值的参考!

    转载地址:http://tamwk.baihongyu.com/

    你可能感兴趣的文章
    MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
    查看>>
    mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
    查看>>
    mysql中出现Unit mysql.service could not be found 的解决方法
    查看>>
    mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
    查看>>
    Mysql中各类锁的机制图文详细解析(全)
    查看>>
    MySQL中地理位置数据扩展geometry的使用心得
    查看>>
    Mysql中存储引擎简介、修改、查询、选择
    查看>>
    Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
    查看>>
    mysql中实现rownum,对结果进行排序
    查看>>
    mysql中对于数据库的基本操作
    查看>>
    Mysql中常用函数的使用示例
    查看>>
    MySql中怎样使用case-when实现判断查询结果返回
    查看>>
    Mysql中怎样使用update更新某列的数据减去指定值
    查看>>
    Mysql中怎样设置指定ip远程访问连接
    查看>>
    mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
    查看>>
    Mysql中文乱码问题完美解决方案
    查看>>
    mysql中的 +号 和 CONCAT(str1,str2,...)
    查看>>
    Mysql中的 IFNULL 函数的详解
    查看>>
    mysql中的collate关键字是什么意思?
    查看>>
    MySql中的concat()相关函数
    查看>>