npm 包 summernote-plugins 使用教程

简介

summernote-plugins 是一个基于 summernote 富文本编辑器的扩展包,提供了更丰富的功能和更友好的用户体验。它扩展了 summernote 原有的功能,例如增加了表格插件、LaTeX 公式插件、虚线插件、图片上传插件等。

安装

可以通过 npm 安装 summernote-plugins 包。运行以下命令:

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

使用

使用 summernote-plugins 其实很简单,唯一需要注意的是需要在 summernote 启用之前引入 summernote-plugins 等相关资源。

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

插件列表

tableResize

表格自适应宽度

latex

支持 LaTeX 公式

promocode

支持添加代码片段和语言高亮

imageBlobResize

支持修改图片大小

应用示例

tableResize

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

latex

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

promocode

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

imageBlobResize

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

总结

本文介绍了 summernote-plugins 包的相关内容,通过学习,我们可以进一步扩展 summernote 富文本编辑器的功能,改善用户体验。最后,希望本文对大家有所帮助。

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


猜你喜欢

  • npm 包 qb-utf8-ez 使用教程

    如果您是一名前端开发人员,那么您一定使用过 JavaScript 语言编写的程序。在编写 JavaScript 代码的过程中,经常需要对字符串进行编码转换。而 npm 包 qb-utf8-ez 就是一...

    3 年前
  • npm 包 gendiff-hexlet-mput 使用教程

    在进行前端开发时,对比两个不同版本的代码差异是一件非常常见的事情。这时候我们可以通过使用 gendiff-hexlet-mput 这个 npm 包来生成代码差异报告,从而更加方便地进行比对。

    3 年前
  • npm包ractive-ez-core使用教程

    ractive-ez-core是一个前端开发框架,它基于Ractive.js开发,旨在为开发者提供一种更加简洁、易于维护的开发模式。本文将介绍ractive-ez-core的使用方法,包括安装、配置和...

    3 年前
  • npm 包 zt-mint-ui 使用教程

    zt-mint-ui 是一个基于 Mint UI 的 H5 移动端 UI 组件库,具有轻量、简便、易上手等特点,为前端开发提供了方便快捷的 UI 组件。 在本篇文章中,我们将会介绍 zt-mint-u...

    3 年前
  • npm 包 @kohlmannj/react-jss-themr 使用教程

    在前端开发中,我们经常需要使用各种 npm 包来提高开发效率和代码质量。其中,@kohlmannj/react-jss-themr 是一个提供了 React JSS 样式集成和扩展主题功能的 npm ...

    3 年前
  • npm 包 ejoy-react-native-android-blur 使用教程

    前言 在前端开发中,经常需要对图片进行处理和加工,其中模糊化图片是其中一个常用的方法。而 ejoy-react-native-android-blur 是一个 npm 包,可以在 React Nati...

    3 年前
  • npm 包 gulp-es6-amd 使用教程

    在前端开发中,我们使用 gulp 构建工具来处理各种任务。当我们使用 ES6 语法编写 JavaScript 代码时,gulp-es6-amd 是一个非常好的 npm 包。

    3 年前
  • npm 包 @_keie/platzom 使用教程

    简介 npm 是一个包管理器,用于安装、管理和分享 JavaScript 包。 @_keie/platzom 是一款可以对西班牙语进行变形处理的 npm 包。它可以将给定的字符串进行不同的转换,例如,...

    3 年前
  • npm 包 ango 使用教程

    在前端开发中,我们常常需要使用各种常见的 JavaScript 库和框架来增强我们的应用程序。在这些库和框架中,Angular 一直以来都是大家最喜欢的之一。如果你正在使用 Angular 开发应用程...

    3 年前
  • npm 包 reveal.js-breadcrumb 使用教程

    在前端开发中,使用巧妙的 UI 展示技巧可以让我们的网页更加生动有趣,今天我们来介绍一个 npm 包 reveal.js-breadcrumb,它可以在我们使用 reveal.js 制作 PPT 时添...

    3 年前
  • npm 包 reggie3-react-native-hr 使用教程

    简介 reggie3-react-native-hr 是一款基于 React Native 开发的用于添加水平分割线组件的 npm 包。它可以用于自定义样式和颜色的分割线,为 React Native...

    3 年前
  • npm 包 immutable.js-flow-fix 使用教程

    简介 随着前端开发的不断发展,越来越多的开发者开始关注性能和数据的不可变性问题。Immutable.js 是一种支持不可变数据结构的 JavaScript 库,可以帮助开发者高效地实现数据不变性,从而...

    3 年前
  • npm 包 dlpr-favicons-webpack-plugin 使用教程

    前言 现如今,随着互联网行业的不断发展,前端开发人员的工作越来越繁琐。面对不断发展的技术,作为前端开发人员,我们必须时刻保持学习的态度。这篇文章主要介绍 npm 中一个有用的包,dlpr-favico...

    3 年前
  • npm 包 reveal.js-titlebar 使用教程

    reveal.js-titlebar 是一个基于 npm 包而来的插件,它可以帮助前端工程师们快速搭建漂亮的幻灯片,在演示过程中还能够显示当前页面的标题和进度等信息,提升了演示效果。

    3 年前
  • npm 包 google-shortcut-cli 使用教程

    什么是 google-shortcut-cli google-shortcut-cli 是一个 npm 包,用于在终端上快速执行 google 搜索。它可以从终端直接打开浏览器并搜索你输入的关键词,省...

    3 年前
  • npm 包 dlpr-favicons 使用教程

    npm 包 dlpr-favicons 使用教程 什么是 favicons? favicons(网站图标),是在浏览器地址栏旁边的小图标,通常用于标识网站。同时,它们也可以在书签、移动设备主屏幕等位置...

    3 年前
  • npm 包 rndid 使用教程

    随着前端开发的迅速发展,现在我们依赖于npm来管理各种第三方库和工具。在许多应用中,我们需要为元素生成唯一的 id,以便在DOM中进行操作。为了完成这项任务,我们可以使用一个称为 rndid 的 np...

    3 年前
  • npm 包 mysql-crud-parser 使用教程

    简介 mysql-crud-parser 是一款用于解析 MySQL CRUD 语句的 Node.js 模块。它可以将 MySQL CRUD 语句从字符串格式转化为 JavaScript 对象格式,方...

    3 年前
  • npm 包 @purple-seal/vue-tabs 使用教程

    @purple-seal/vue-tabs 是一个能够快速帮助我们构建 Vue.js 应用程序页面上的选项卡的 npm 包。@purple-seal/vue-tabs 比较容易上手,可以大大减少前端程...

    3 年前
  • npm 包 laravel-angular-pagination 使用教程

    当在开发中需要对大量数据进行分页或者实现一些分页相关功能时,laravel-angular-pagination 是一个非常好用的 npm 包。在本文中,我们将会详细介绍如何使用 laravel-an...

    3 年前

相关推荐

    暂无文章