npm 包 egg-born-module-a-mavoneditor 使用教程

介绍

egg-born-module-a-mavoneditor 是一个基于 mavonEditor 的 egg-born 模块,用于在 egg 中方便地使用 mavonEditor 进行 Markdown 编辑和渲染。本文将介绍如何在 egg 中使用 egg-born-module-a-mavoneditor。

安装

可以通过 npm 安装 egg-born-module-a-mavoneditor:

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

配置

在 egg 的 config/config.default.js 中配置 egg-born-module-a-mavoneditor:

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

  -- ---

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

  -- ---

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

其中 defaultOptions 是 mavonEditor 的默认配置,可以在组件中覆盖它们。

使用

在 egg-born 模块中使用 egg-born-module-a-mavoneditor:

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

在 /* home.html 中,将 mavonEditor 的实例化参数传递给 Editor 组件:

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

其中,editor 是你的前端组件,可以是 Vue 或 React 组件。此处使用 Vue 组件。

示例代码

egg 的 config/config.default.js 配置

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

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

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

egg-born 模块中的 Controller

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

home.html 中的 Vue 组件

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

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

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

Editor.vue 中的 Vue 组件

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

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

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

总结

通过本文,你已经了解了如何在 egg 中使用 egg-born-module-a-mavoneditor。你可以根据需要,进一步掌握 mavonEditor 的使用,并在 egg 项目中快速实现 Markdown 编辑和渲染。

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


猜你喜欢

  • npm包hubbub的使用教程

    在Web开发中,我们经常需要对RSS流进行解析,以便在我们的网站上展示最新的内容。hubbub是一个用于处理RSS订阅的npm包,它可以为我们提供一个可靠的解析工具。

    4 年前
  • npm 包 neutron-html5parser 使用教程

    在前端开发中,HTML 是最基础的技术之一。而 HTML5 作为最新版本的 HTML,已经成为开发者们使用的标准。在处理 HTML5 字符串时,我们通常需要把 HTML5 字符串解析为 DOM 树,以...

    4 年前
  • npm 包 htmlparser-benchmark 使用教程

    简介 htmlparser-benchmark 是一个用于测试 HTML 解析器性能的 npm 包,是漏洞扫描器安全测试工具 w3af 的一部分。除了测量解析性能以外,该工具还支持对解析器的错误处理能...

    4 年前
  • npm 包 @types/jws 使用教程

    在前端开发中,很多时候我们需要对 JSON Web Token(JWT) 进行加解密操作。而 @types/jws 这个 npm 包提供了一系列的类型定义和接口定义,可以帮助开发者更加方便和安全地进行...

    4 年前
  • npm 包 @types/watch 使用教程

    简介 @types/watch 是 TypeScript 的一个声明文件,它为 watch 提供类型定义,可以帮助开发者在 TypeScript 中更加方便地使用 watch。

    4 年前
  • npm 包 @pptr/testrunner 使用教程

    简介 @pptr/testrunner 是一个基于 Puppeteer 的测试框架,可以用来测试网站的交互行为和 UI。它的特点是使用无头浏览器,可以实现自动化测试,即能够模拟人类在浏览器中的交互操作...

    4 年前
  • npm 包 @pptr/testserver 使用教程

    前言 在前端开发中,我们通常需要进行 UI 自动化测试,以确保网站的正确性和稳定性。而 Puppeteer 是一款由谷歌开发的非常优秀的自动化测试工具。它是一个 Node.js 库,提供了一组 API...

    4 年前
  • npm 包 jsonexport 使用教程

    在前端开发过程中,常常需要将处理后的数据导出为 Excel 或 CSV 文件。jsonexport 是一个可以将 JSON 数据导出为 CSV 或 HTML 表格的方便工具,它可以通过 NPM 安装并...

    4 年前
  • npm 包 gcx 使用教程

    简介 gcx 是一个可以帮助前端开发者快速构建图形化组件的 npm 包。它提供了丰富的图形化组件和 API,支持多种事件绑定和数据交互方式。此外,它还支持插件机制,方便拓展和自定义。

    4 年前
  • npm 包 @npm/types 使用教程

    在 Node.js 开发中,npm 是一个重要的包管理器,它允许我们轻松地安装和管理项目依赖项。@npm/types 是一个专门为 npm 开发者定制的包,它提供了许多有用的类型定义和接口,可以帮助我...

    4 年前
  • npm 包 inline-fixtures 使用教程

    前言 在前端开发中,经常需要使用静态数据来测试页面的展示效果,但是我们不希望数据与代码紧密耦合,也不想每次测试都去请求接口。因此,使用 mock 数据是一个不错的选择。

    4 年前
  • npm 包 @smartive/tslint-config 使用教程

    介绍 @smartive/tslint-config 是一个由 Smartive 团队开发的 TSLint 配置包。@smartive/tslint-config 包含了一系列的规则,可以帮助开发者在...

    4 年前
  • npm 包 @types/proxy-from-env 使用教程

    什么是 @types/proxy-from-env @types/proxy-from-env 是一个 TypeScript 类型定义文件,它是针对代理配置环境变量进行类型注解的。

    4 年前
  • npm 包 @sweet-js/cli 使用教程

    简介 Sweet.js 是一个可以扩展 JavaScript 语言的宏系统,它允许你定义自己的语法,并且能够让你在代码中使用这些自定义的语法。Sweet.js 代码可以转换成标准的 JavaScrip...

    4 年前
  • npm 包 readtable 使用教程

    在前端开发中,处理表格数据是非常常见的需求。而 npm 包 readtable 提供了一种简单而强大的方法,能够帮助我们方便地处理表格数据。 什么是 readtable readtable 是一个 n...

    4 年前
  • npm 包 shift-js 使用教程

    在前端开发中,处理 JavaScript 代码的 AST(Abstract Syntax Tree,抽象语法树)是一个很常见的需求。AST 可以对 JavaScript 代码进行分析、优化和转换等操作...

    4 年前
  • npm 包 shift-spidermonkey-converter 使用教程

    在前端开发过程中,我们常常需要将 JavaScript 代码转换成 AST(抽象语法树),以便于进行代码分析、优化、变形等操作。shift-spidermonkey-converter 是一个支持将 ...

    4 年前
  • npm 包 sweet-spec-macro 使用教程

    前言 sweet-spec-macro 是一个 npm 包,是 Sweet.js 的一个宏,可以用来写测试。sweet-spec-macro 通过宏来解决了 JavaScript 在写测试时的一些问题...

    4 年前
  • npm 包 sweet-spec 使用教程

    前言 在前端开发中,我们经常需要编写各种测试用例来保证代码的质量,同时也需要对代码进行规范化管理,以提高代码的可读性和可维护性。而 sweet-spec 就是一款可以方便地帮助我们管理和编写测试用例和...

    4 年前
  • npm包utils-platform使用教程

    随着前端技术的发展,web应用变得越来越复杂。为了满足用户的需求,我们需要开发一些适用于不同平台的应用程序。遇到这种情况,我们可以使用一个非常有用的npm包——utils-platform。

    4 年前

相关推荐

    暂无文章