npm 包 simplemde-shine-ren 使用教程

前言

在前端开发中,我们经常需要在项目中使用文本编辑器。而 simplemde 是一个轻量级的基于 Markdown 的文本编辑器,功能强大且使用简单。在 simplemde 的基础上,shine-ren 在其上进行了二次封装,并发布了 npm 包 simplemde-shine-ren,使得在项目中使用 simplemde 变得更加容易和方便。

本文将详细介绍如何使用 simplemde-shine-ren。

安装

使用 npm 或 yarn 安装 simplemde-shine-ren:

--- ------- -------------------

或者

---- --- -------------------

使用

安装完成后,在项目中引入 simplemde-shine-ren:

------ --------- ---- ----------------------
------ ---------------------------------------------

接下来就可以在项目中使用 SimpleMDE 了:

----- --------- - --- -----------
  -------- --------------------------------------
---

通过以上代码,simplemde 就可以应用在页面的 idmy-textarea 的 textarea 上了。

配置

simplemde 的相关配置选项可以通过传递一个对象参数进行配置。例如:

----- --------- - --- -----------
  -------- ---------------------------------------
  ------------- ------
  -------- -
    -------
    ---------
    ----------
    ----
    --------
    -----------------
    ---------------
    ----
    -------
    --------
    ----
    ----------
    -------------
    -------
  -
---

以上代码禁用了拼写检查,并且对工具栏做了相应修改,只包含了常用的功能按钮。

完整的配置选项,请参考 SimpleMDE 的文档

示例

下面是一个简单的例子,演示了 simplemde 在页面中的应用:

--------- -----
----- -------------
  ------
    ----- --------------- --
    ----- --------------- ---------------------------- ------------------ --
    -------------------------- ----------
    ----- ---------------- ------------------------------------------------------------------------------ --
    -------
      ---------- -
        ---------- ------
        ------- - -----
      -
    --------
  -------
  ------
    ---- ------------------
      --------- ----------------------------
    ------
    ------- --------------------------------------------------------------------------------------
    --------
      ----- --------- - --- -----------
        -------- ---------------------------------------
        ------------- ------
        -------- -
          -------
          ---------
          ----------
          ----
          --------
          -----------------
          ---------------
          ----
          -------
          --------
          ----
          ----------
          -------------
          -------
        -
      ---
    ---------
  -------
-------

在页面中,你将看到一个 textarea 和一个简单的工具栏。可以使用工具栏中的按钮来编辑 textarea 中的文本,同时还可以在 textarea 中按下 Ctrl+Shift+M 回车键来进行编辑器的全屏模式。

结语

simplemde-shine-ren 简化了在项目中使用 simplemde 的过程,同时也为我们提供了更加自由的配置选项。希望以上介绍和示例能对你有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055a4781e8991b448d7e79


猜你喜欢

  • npm 包 koa2-session-store 使用教程

    在前端开发过程中,会经常使用到 koa2 这个 Node.js 的 web 框架。而 koa2-session-store 是一个可以帮助我们管理 session 的 npm 包,使用起来非常方便。

    2 年前
  • npm 包 ng-harmony-util 使用教程

    前言 在前端开发中,我们经常需要使用各种工具库来提升开发效率和代码质量。npm 作为新一代的 JS 包管理工具,已成为前端领域中最流行的工具之一。而 ng-harmony-util 是一个基于 Ang...

    2 年前
  • NPM 包 renaissance-spa 使用教程

    renaissance-spa 是一款针对现代 Web 应用的极简前端单页应用(SPA)框架,它专注于提升前端应用的性能和用户体验。renaissance-spa 以其简洁、易用和高效受到了广泛的欢迎...

    2 年前
  • npm 包 rocketleaguesam-api-client 使用教程

    简介 rocketleaguesam-api-client 是一个轻量级的 npm 包,为前端开发者提供了对 Rocket League Stats API 的访问和使用的接口。

    2 年前
  • npm 包 stemcell 使用教程

    在前端工程化过程中,我们经常会使用各种各样的 npm 包来帮助我们完成开发任务。而在这些 npm 包中,stemcell 也是一个非常实用和强大的工具包。它提供了一组现代的 JavaScript 开发...

    2 年前
  • npm 包 cerebro-hackernews 使用教程

    简介 cerebro-hackernews 是一个基于 Node.js 的 npm 包,它为开发者提供方便快捷地获取 Hacker News 新闻信息的功能。 通过 cerebro-hackernew...

    2 年前
  • npm 包 choco-cli 使用教程

    随着前端开发的发展,我们经常需要使用各种各样的工具来辅助我们的工作。而其中一个被广泛使用的工具就是 npm。npm 可以帮助我们管理 JS 包,从而轻松地构建和管理我们的前端项目。

    2 年前
  • npm 包 danilo-araujo-silva 使用教程

    前言 在开发前端应用时,我们经常需要一些第三方的 JavaScript 库,而这些库通常会被打包成一个个的 npm 包。这种机制使得开发者可以很方便地引用别人开发的代码,从而避免了重复造轮子的现象。

    2 年前
  • npm 包 time-away 使用教程

    介绍 npm 包 time-away 是一个 JavaScript 库,用于计算给定时间与现在时间之间的时间差距。 在 Web 开发中,经常需要计算时间差来展示时间戳、计时器等功能。

    2 年前
  • npm 包 language-wizard 使用教程

    简介 language-wizard 是一个 npm 包,用于在前端项目中实现多语言功能。它包含了一些常见的语言识别与转换相关的工具函数,可以帮助我们快速、方便地实现网站国际化。

    2 年前
  • npm 包 capistrano-config 使用教程

    介绍 capistrano-config 是一款基于 node.js 的 npm 包,用于方便地管理 yaml 配置文件和环境变量。它有着简单易用的 API 和丰富的功能,在前端 Web 开发中发挥着...

    2 年前
  • npm 包 tq-mreset 使用教程

    介绍 tq-mreset 是一个轻量级的 CSS 样式重置库,它可以用来重置浏览器的默认样式,使得各种 HTML 元素在不同浏览器中保持统一的样式表现。它适用于各种类型的网站开发,特别是前端开发。

    2 年前
  • npm 包 reserve-web 使用教程

    简介 reserve-web 是一个基于 Node.js 的 HTTP 静态文件服务器,可以让您快速搭建一个本地开发服务器,方便前端开发调试和测试。reserve-web 支持自定义端口、本地域名、h...

    2 年前
  • npm 包 eslint-config-binded-browser 使用教程

    背景 在前端开发中,为了提高代码的规范性和可维护性,通常使用 linter 工具来规范代码风格。ESLint 是前端开发中常用的 linter 工具之一,可以帮助开发者发现代码中的潜在问题,并给出相应...

    2 年前
  • npm 包 json-from-location-hash 使用教程

    在前端开发中,我们时常需要将一些数据传递给其他页面或组件,为此我们需要将这些数据进行编码和解码。一种常用的方式是将数据序列化为 JSON 字符串,然后将其传递给 URL。

    2 年前
  • npm 包 babel-preset-binded-browser 使用教程

    前言 在前端开发中,我们通常需要将 ES6+ 语法编译成能够在浏览器中运行的 ES5 语法。为了方便地进行编译,我们通常会使用 Babel 这样的工具。本文将介绍一个名为 babel-preset-b...

    2 年前
  • npm 包 xmlforall 使用教程

    前言 在前端开发中,我们经常要处理 XML 数据。而 xmlforall 这个 npm 包,就是用来解析和转换 XML 数据的。本文将详细介绍 xmlforall 的使用方法,并带有示例代码和使用心得...

    2 年前
  • npm 包 antlr4ts-json 使用教程

    简介 antlr4ts-json 是一个基于 ANTLR 4 和 TypeScript 语言开发的 JSON 解析工具。使用它可以方便地解析 JSON 数据,并且能够自动生成文法解析代码。

    2 年前
  • npm 包 feederjs 使用教程

    在现代的 Web 开发中,前端工程师使用的 npm 包如此之多,而其中一个非常有用的 npm 包是 Feederjs。Feederjs 是一个用于多种 UI 框架的响应式数据绑定库,它使得实时数据同步...

    2 年前
  • npm 包 brigadehub-public-c4sf-opensavannah 使用教程

    在前端开发中,我们经常会使用各种第三方工具和库来提高开发效率。而 npm 包是其中应用最广泛的一种工具。在本文中,我主要介绍一个名为 brigadehub-public-c4sf-opensavann...

    2 年前

相关推荐

    暂无文章