13.5k star, 免费开源 Markdown 编辑器

13.5k star, 免费开源 Markdown 编辑器

分类 开源分享

项目名: Editor.md -- Markdown 编辑器

Github 开源地址: https://github.com/pandao/editor.md

在线测试地址: Editor.md - 开源在线 Markdown 编辑器

完整实例: HTML Preview(markdown to html) - Editor.md examples

在目前的互联网世界中,Markdown 已经成为了内容创作者、开发者和技术写作者的首选标记语言。它以其简洁的语法和易于阅读的格式而广受欢迎。

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器,基于 CodeMirror、jQuery 和 Marked 构建,它的出现为用户提供了更为便捷、功能丰富的 Markdown 编辑体验。

Editor.md 是一款功能强大、灵活且易于使用的 Markdown 编辑器,它为 Markdown 爱好者和专业人士提供了一个高效的在线编辑解决方案。

Editor.md 提供了丰富的功能和插件,使得用户可以根据自己的需求进行定制化。例如,用户可以通过插件实现数学公式的编辑、流程图、时序图的绘制,甚至是实现多人协作编辑等功能。

主页提供了很多实例,方便我们学习使用:

一个简单的实例:

绘制序列图:

Editor.md 具备了以下特性:

  • 所见即所得(WYSIWYG):Editor.md提供了一个直观的编辑界面,用户可以在编辑器中实时查看Markdown文本的渲染效果。

  • 高度可定制:通过配置选项,用户可以调整编辑器的外观和行为,以适应不同的使用场景和品牌风格。

  • 丰富的插件支持Editor.md 支持多种插件,如图片上传、表情符号、代码高亮等,极大地扩展了编辑器的功能。

  • 跨平台兼容性:无论是在桌面还是移动设备上,Editor.md 都能提供流畅的编辑体验。

  • 易于集成:作为一个组件,Editor.md 可以无缝集成到现有的 Web 应用或服务中,无需复杂的配置。

Editor.md 使用场景:

  • 博客和 CMS 系统:为内容管理系统提供 Markdown 编辑功能,让作者专注于创作。
  • 论坛和社区:在用户生成内容的平台上提供 Markdown 编辑器,提升帖子的质量。
  • 文档和知识库:为技术文档和帮助中心提供 Markdown 编辑器,确保文档格式的一致性。
  • 个人网站和作品集:为个人项目提供 Markdown 编辑器,方便快速更新和维护。

安装

npm 安装方法:

复制代码
npm install editor.md

Bower 安装方法:

复制代码
bower install editor.md

创建 Markdown 编辑器:

实例

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />

<div id="editor">

<!-- Tips: Editor.md can auto append a `<textarea>` tag -->

<textarea style="display:none;">### Hello Editor.md !</textarea>

</div>

<script src="jquery.min.js"></script>

<script src="editor.md/editormd.min.js"></script>

<script type="text/javascript">

$(function() {

var editor = editormd("editor", {

// width: "100%",

// height: "100%",

// markdown: "xxxx", // dynamic set Markdown text

path : "editor.md/lib/" // Autoload modules mode, codemirror, marked... dependents libs path

});

});

</script>

Markdown 转 HTML:

实例

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />

<div id="test-markdown-view">

<!-- Server-side output Markdown text -->

<textarea style="display:none;">### Hello world!</textarea>

</div>

<script src="jquery.min.js"></script>

<script src="editormd/editormd.js"></script>

<script src="editormd/lib/marked.min.js"></script>

<script src="editormd/lib/prettify.min.js"></script>

<script type="text/javascript">

$(function() {

var testView = editormd.markdownToHTML("test-markdown-view", {

// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text

// htmlDecode : true, // Enable / disable HTML tag encode.

// htmlDecode : "style,script,iframe", // Note: If enabled, you should filter some dangerous HTML tags for website security.

});

});

</script>

相关推荐
说私域7 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
猫头虎9 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
特立独行的猫a9 小时前
百度AI文心大模型4.5系列开源模型评测,从安装部署到应用体验
人工智能·百度·开源·文心一言·文心一言4.5
大咖分享课12 小时前
开源模型与商用模型协同开发机制设计
人工智能·开源·ai模型
tinker12 小时前
使用 Syncthing 2.0 搭建私有同步服务器
开源
断剑重铸之日13 小时前
Android开发:GoogleMap电子围栏与联想地址搜索
开源
Sincerelyplz13 小时前
【Temproal】快速了解Temproal的核心概念以及使用
笔记·后端·开源
小黄编程快乐屋13 小时前
「源力觉醒 创作者计划」_文心 4.5 开源模型玩出花——教育场景下 Scratch 积木自动化生成的部署实践与优化
开源
时序数据说19 小时前
时序数据库IoTDB用户自定义函数(UDF)使用指南
大数据·数据库·物联网·开源·时序数据库·iotdb