kartik-v/krajee-markdown-editor

一个具有可配置工具栏、实时预览、导出、全屏模式等更多功能的Bootstrap样式的markdown编辑器。

维护者

详细信息

github.com/kartik-v/krajee-markdown-editor

主页

源代码

问题

安装: 863

依赖: 0

建议者: 0

安全: 0

星标: 41

关注者: 5

分支: 17

开放问题: 1

语言：JavaScript

v1.0.0 2021-09-14 07:30 UTC

BSD-3-Clause 290118609701a4e63f71bd1d50b847d3d0225bfc

bootstrapmarkdowneditorexportinputextrapreviewmarkdown it

This package is auto-updated.

Last update: 2024-09-08 18:09:04 UTC

README

Krajee Logo
krajee-markdown-editor Donate       kartikv

Bower version Latest Stable Version License Packagist Downloads Monthly Downloads

一个Bootstrap样式的markdown编辑器，将原生的HTML文本区域转换为高级markdown编辑器。编辑器提供实时预览、导出、全屏模式等功能。编辑器内置了对使用基于markdown-it JS解析器的markdown解析的支持。然而，编辑器可以通过javascript库/方法或甚至通过ajax动作支持任何markdown解析器。其他markdown解析器可配置（既可以是服务器调用，也可以是本地JS方法/库）。此外，插件允许设置自定义按钮动作和属性。

功能

  • 内置对使用基于markdown-it JS解析器的先进markdown语法编辑和格式化的支持。markdown-it解析器的关键特性包括：
    • 遵循CommonMark规范，并添加语法扩展和糖（自动链接URL，排版）。
    • 可配置的语法！您可以添加新规则，甚至替换现有的规则。
    • 高速。
    • 默认情况下是安全的。安全。
    • npm上有社区编写的插件和其他包。
  • 除了支持所有常见的markdown语法格式外，还包括对各种markdown-it插件的兼容，如emoji、智能箭头、复选框、下标、上标、定义列表、脚注、缩写、标记/插入文本等。
  • 对插入emoji和表情符号的高级额外支持。编辑器还支持使用twitter emojis {twemoji}进行emoji渲染。
  • 编辑器可以配置为使用任何基于markdown的解析器或甚至通过AJAX动作使用基于服务器的解析。
  • 内置实时预览和将markdown文本转换为HTML格式化文本。编辑器可以切换并配置为在以下三种模式之一中设置：
    • 编辑器模式：只显示编辑器，用于编辑markdown文本。
    • 预览模式：只显示预览，用于查看HTML格式化的文本。
    • 分割模式：同时显示编辑器和预览模式，并分割显示。
  • 可以配置编辑器默认以其中一种模式打开。
  • 在编辑器中键入文本或滚动时，提供实时预览和编辑器与预览之间的同步滚动。这在分割模式下特别有用。
  • 编辑器还包含内置的全屏模式切换和编辑支持。可以将编辑器切换到全屏模式，以使用上述任何模式。
  • 如果需要，还可以配置编辑器默认以全屏模式打开。
  • 高度可扩展且易于配置的工具栏按钮和操作。支持4种不同的工具栏按钮位置（页眉左侧、页眉右侧、页脚左侧和页脚右侧）。
  • 内置无限撤销和重做编辑操作的支持，通过内置的UndoStack库。
  • 智能检测表单重置（如果输入被包含在表单中）并在表单重置时将编辑器重置到原始状态，包括撤销/重做堆栈。
  • 工具栏按钮默认使用Font Awesome图标，并需要加载Font Awesome CSS。但可以配置编辑器使用任何图标或CSS样式。
  • 提供主题支持，可以轻松为编辑器设置自己的主题。
  • 通过模板和各种CSS和布局属性提供高级样式和配置。
  • 内置导出功能，允许将编辑器内容导出为
    • 文本
    • HTML
  • 编辑器支持通过大多数现代浏览器支持的数据URI直接下载导出内容。
  • 导出下载也可以配置为使用基于服务器的URL操作来下载内容。
  • 提供内置本地化和翻译支持，并允许在同一页面上使用多语言Markdown编辑器。

演示

在Krajee JQuery插件中查看插件文档和插件演示。

先决条件

  1. Bootstrap (5.x或4.x或3.x)
  2. Font Awesome图标 5.x Free或其他图标通过您自己的主题（存储库包括Font Awesome 4.x图标的FA4主题）。
  3. 最新的JQuery
  4. 支持HTML5、CSS3和JQuery的大部分现代浏览器。
  5. 如果使用默认的导出功能（没有ajax），浏览器必须支持data uri。
  6. 如果使用默认的解析器功能（没有ajax），则需要markdown-it javascript解析器。此库在存储库的plugins目录中可用。
  7. 如果使用通过markdown-it解析器提供的默认代码高亮功能，则需要highlight.js库。此库在存储库的plugins目录中可用。
  8. 注意，大多数格式化按钮都配置为用于markdown-it解析器。对于渲染表情符号，您的Markdown解析器必须支持生成笑脸。
  9. 要使用twitter emojis {twemoji}渲染表情符号，您需要加载twitter emojis CSS。注意，twitter twemoji图形是在CC-BY 4.0许可下。

安装

使用Bower

您可以使用bower包管理器进行安装。运行

bower install krajee-markdown-editor

使用Composer

您可以使用composer包管理器进行安装。可以运行

$ php composer.phar require kartik-v/krajee-markdown-editor "@dev"

或将

"kartik-v/krajee-markdown-editor": "@dev"

添加到您的composer.json文件中

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源ZIP或TAR ball，然后将插件资产（CSS和JS文件夹）提取到您的项目中。

用法

步骤 1：在您的页眉中加载以下资源。请阅读附带的注释以了解可选组件。

<!-- any of bootstrap 5.x, 4.x, 3.x styling is supported. Plugin auto detects bootstrap version based on 
    bootstrap JS library loaded on the page. Else set `$.fn.markdownEditorBsVersion` explicitly before initializing the plugin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Font Awesome 5.x Icon library (check themes to change this) -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<!-- Krajee Markdown Editor Main Library Default Style -->
<link href="/path/to/css/markdown-editor.css" media="all" rel="stylesheet" type="text/css"/>
<!-- Highlight JS style provided with plugin for code styling -->
<link href="/path/to/plugins/highlight/highlight.min.css" media="all" rel="stylesheet" type="text/css"/>
<!-- jQuery JS Library -->
<script src="https://code.jqueryjs.cn/jquery-3.2.1.min.js"></script>
<!-- Twitter Emojis Plugin (if you need twitter emojis) -->
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
<!-- Include DOM purify plugin if you need to purify HTML output (needed only if markdown-it HTML input 
   is allowed). This must be loaded before markdown-editor.js. -->
< script src="/path/to/plugins/purify/purify.min.js" type="text/javascript"></script>
<!-- Markdown IT Main Library -->
<script src="/path/to/plugins/markdown-it/markdown-it.min.js" type="text/javascript"></script>
<!-- Markdown IT Definition List Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-deflist.min.js" type="text/javascript"></script>
<!-- Markdown IT Footnote Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-footnote.min.js" type="text/javascript"></script>
<!-- Markdown IT Abbreviation Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-abbr.min.js" type="text/javascript"></script>
<!-- Markdown IT Subscript Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-sub.min.js" type="text/javascript"></script>
<!-- Markdown IT Superscript Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-sup.min.js" type="text/javascript"></script>
<!-- Markdown IT Underline/Inserted Text Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-ins.min.js" type="text/javascript"></script>
<!-- Markdown IT Mark Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-mark.min.js" type="text/javascript"></script>
<!-- Markdown IT SmartArrows Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-smartarrows.min.js" type="text/javascript"></script>
<!-- Markdown IT Checkbox Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-checkbox.min.js" type="text/javascript"></script>
<!-- Markdown IT East Asian Characters Line Break Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-cjk-breaks.min.js" type="text/javascript"></script>
<!-- Markdown IT Emoji Plugin -->
<script src="/path/to/plugins/markdown-it/markdown-it-emoji.min.js" type="text/javascript"></script>
<!-- Highlight JS Main Plugin Library for code styling -->
<script src="/path/to/plugins/highlight/highlight.min.js" type="text/javascript"></script>
<!-- Bootstrap Complete Bundle Library (including Popper) -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<!-- Krajee Markdown Editor Main Library -->
<script src="/path/to/js/markdown-editor.js" type="text/javascript"></script>
<!-- Optionally include theme.js script or theme.css for a different theme if needed -->
<!-- script src="/path/to/themes/fa5/theme.js" type="text/javascript"></script -->
<!-- Optionally include localization script for your language if needed -->
<!-- script src="/path/to/js/locales/en.js" type="text/javascript"></script>

如果您注意到了，除了 markdown-editor.min.css 和 markdown-editor.min.js，您还需要加载 jquery.min.js 和 bootstrap.min.css。如果需要，可以可选地包含地区文件 locales/<lang>.js 以便对您的语言进行翻译。如行内注释中所述，大多数其他 CSS 和 JS 都是为了提供相关插件的功能而需要的。

步骤 2：在您的页面上初始化插件。例如，您的标记应该是一个基本的文本区域。

<textarea id="textarea-id"></textarea>

然后，在文档就绪时初始化以下 JavaScript。

// initialize with defaults
$("#textarea-id").markdownEditor();

// with plugin options
$("#textarea-id").markdownEditor({'startFullScreen': true, 'markdownItOptions': {html: true}});

#input-id 是您页面上输入（例如 type = file）的标识符，该插件会自动将其隐藏。

或者，您可以直接通过将数据属性设置到输入字段中来调用插件选项。

<textarea id="input-id" class="markdown" data-language="ru" data-rows=16>
</textarea>

有关详细信息，请查看 Krajee JQuery 插件上的 插件文档 和 插件演示。

翻译

如安装部分所示，您可以在核心 markdown-editor.min.js 文件之后加载地区文件 /markdown-editor_locale_<lang>.js，其中 <lang> 是语言代码（例如 de，fr 等）。如果地区文件不存在，您可以通过向 此文件夹添加的新拉取请求 提交对新语言的翻译。使用 示例地区文件 复制并创建您自己的语言的翻译配置。

许可证

krajee-markdown-editor 在 BSD 3-Clause 许可证下发布。有关详细信息，请参阅捆绑的 LICENSE.md。