首页
/ demarcate.js 使用教程

demarcate.js 使用教程

2024-08-31 08:08:00作者：明树来
demarcate.js
An in-place, WYSIWYG web based Markdown Editor
项目地址：https://gitcode.com/gh_mirrors/de/demarcate.js

1、项目介绍

demarcate.js 是一个基于 jQuery 的 Markdown 编辑器，允许用户直接在页面上的 HTML 元素中编辑和生成 Markdown 文本。它支持大多数浏览器，包括移动浏览器，并且从版本 2.0.0 开始，没有必需的依赖项。你可以选择包含 keymaster.js 用于键盘绑定，以及 showdown.js 如果你希望将 Markdown 转换回 HTML。demarcate.js 是由 William Hart 开发的，并且根据 MIT 许可证提供。

2、项目快速启动

安装

你可以通过 Bower 安装 demarcate.js：

bower install demarcate

然后在你的项目中包含这些文件：

<script src="bower_components/demarcate/bin/demarcate.js"></script>

使用

首先，在你的 HTML 文件中添加一个元素：

<div id="editor"></div>

然后，在页面底部添加以下脚本以启用编辑器：

<script type="text/javascript">
  demarcate.enable(document.getElementById("editor"));
  // 或者使用 jQuery:
  // demarcate.enable($("#editor")[0]);
</script>

3、应用案例和最佳实践

案例一：简单的 Markdown 编辑器

假设你需要一个简单的 Markdown 编辑器来编辑博客文章，你可以使用 demarcate.js 来实现：

<!DOCTYPE html>
<html>
<head>
  <title>Markdown 编辑器</title>
  <script src="bower_components/demarcate/bin/demarcate.js"></script>
</head>
<body>
  <div id="editor"></div>
  <script type="text/javascript">
    demarcate.enable(document.getElementById("editor"));
  </script>
</body>
</html>

最佳实践

  • 模块化使用：尽量将 demarcate.js 作为一个独立的模块引入，避免全局污染。
  • 事件监听：使用 demarcateEditorUpdated 事件来实时获取编辑器的内容。

4、典型生态项目

showdown.js

showdown.js 是一个 Markdown 到 HTML 的转换器，可以与 demarcate.js 结合使用，实现 Markdown 编辑和预览功能：

<script src="bower_components/showdown/dist/showdown.min.js"></script>
<script type="text/javascript">
  var converter = new showdown.Converter();
  document.getElementById("preview").innerHTML = converter.makeHtml(demarcate.parse());
</script>

keymaster.js

keymaster.js 是一个简单的键盘快捷键库，可以与 demarcate.js 结合使用，提供快捷键格式化选项：

<script src="bower_components/keymaster/keymaster.js"></script>

通过这些生态项目的结合，可以大大增强 demarcate.js 的功能和用户体验。

demarcate.js
An in-place, WYSIWYG web based Markdown Editor
项目地址：https://gitcode.com/gh_mirrors/de/demarcate.js

相关内容推荐

1 demarcate.js 使用教程2 TikZJax 使用教程3 RecordRTC 使用教程4 GSTouchesShowingWindow 使用教程5 MicroPython 使用教程6 Himawari.js 使用教程7 texlive.js 使用教程8 Xamarin.Forms.VideoPlayer 使用教程9 HoloGraphLibrary 使用教程10 MCprep 使用教程
热门项目推荐
相关项目推荐

热门内容推荐

1 开发者路线图项目教程2 开源项目 developer-roadmap 使用教程3 Vue.js 教程与指南4 Vue.js 项目教程5 开源项目教程：awesome-selfhosted6 开源项目 `awesome-selfhosted` 使用教程7 TensorFlow 开源项目教程8 TensorFlow：开启机器学习新纪元9 Linux 内核项目使用教程10 Flutter 项目教程

最新内容推荐

《SIFTGPU：在GPU上实现尺度不变特征变换的安装与使用教程》 探索开源漫画阅读器ComicFlow：安装与使用教程 《ArduinoUnit测试框架使用指南》 深入探索ns-3-dev：开源网络模拟器的安装与使用指南 《MapMap视频映射软件的安装与使用指南》 《lest测试框架的安装与使用教程》 深入掌握BayesOpt：安装与使用详解 Snow Crash 解析之旅：安装、使用与实践 《DS3232RTC库的安装与使用教程》 探索frePPLe：制造业供应链计划的开源解决方案安装与使用教程

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
266
55
国产编程语言蓝皮书国产编程语言蓝皮书
《国产编程语言蓝皮书》-编委会工作区
65
17
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
196
45
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
53
44
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！
Cangjie
268
69
qwerty-learnerqwerty-learner
为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers
TSX
333
27
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
896
0
advanced-javaadvanced-java
Advanced-Java是一个Java进阶教程，适合用于学习Java高级特性和编程技巧。特点：内容深入、实例丰富、适合进阶学习。
JavaScript
419
108
MateChatMateChat
前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。 官网地址：https://matechat.gitcode.com
144
24
HarmonyOS-Cangjie-CasesHarmonyOS-Cangjie-Cases
参考 HarmonyOS-Cases/Cases，提供仓颉开发鸿蒙 NEXT 应用的案例集
Cangjie
58
4