一些好用的前端小插件(转自知乎)

news2024/12/23 15:14:45

一些好用的前端小插件(2)

1. cropper.js

Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。

官网地址:https://fengyuanchen.github.io/cropperjs/v2/zh/

2. Vditor

Vditor是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React、Angular,提供桌面版。

官网地址:https://b3log.org/vditor/
Github地址:https://github.com/Vanessa219/vditor

3. PPTist

PPTist是一个基于 Vue3.x + TypeScript 的在线演示文稿(幻灯片)应用,还原了大部分 Office PowerPoint 常用功能,支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型,每一种元素都拥有高度可编辑能力,同时支持丰富的快捷键和右键菜单,支持导出本地 PPTX 文件,支持移动端基础编辑和预览,支持 PWA。您可以在此基础上搭建自己的在线幻灯片应用。

在线体验地址:https://pipipi-pikachu.github.io/PPTist/
github地址:https://github.com/pipipi-pikachu/PPTist

4. Element Tiptap Editor

Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器,基于 tiptap 编辑器和 element-ui 开发,相比很多富文本编辑器,Element Tiptap Editor 使用易上手,对开发者友好,而且可扩展性强,设计简洁。

操作按钮等组件使用 element-ui 组件,整体样式协调美观
有许多开箱即用的 extension(编辑器扩展)
支持 markdown 语法
支持TypeScript 支持
支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)
可用的 events: init, transaction, focus, blur, paste, drop, update
高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图
操作灵活,可以通过直接控制编辑器的行为来定制编辑器。
提供中文文档

地址 https://github.com/Leecason/element-tiptap

5. TypeIt

TypeIt是一个通用的JavaScript打字机效果实现程序。凭借其简单而灵活的配置,您可以键入单个或多个字符串,这些字符串可以中断行,删除/替换彼此,轻松处理包含HTML的字符串,循环等等。而且为了获得更高级、更可控的打字效果,TypeIt附带了一些配套功能,这些功能可以链接起来将您的打字控制在单个字符或毫秒,使您能够键入动态叙述,完全控制速度变化、换行、删除和暂停。

动图

github链接:https://github.com/alexmacarthur/typeit
官网地址:https://www.typeitjs.com/

6. qrcode 二维码

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

文档地址:https://www.npmjs.com/package/qrcode

7. jsbarcode

jsbarcode是一个用于生成条形码的js库

文档地址:https://www.npmjs.com/package/jsbarcode

8. Clipboard.js

Clipboard.js是一个用于将文本复制到剪贴板的 JS 库。

官网地址:https://clipboardjs.com/

9. Driver.js

Driver.js是一个可以轻松实现新手指引交互JavaScript 工具库,主要的作用是为刚接触应用的新手用户快速了解产品,帮助用户把注意力聚焦到某项功能,从而快速熟悉我们的开发的产品。

官网地址:https://kamranahmed.info/driver.js/

10. Pinia.js

Pinia.jsVue.js团队成员所开发的,是新一代的Vuex,即Vuex5.x,在Vue3.0 项目的使用中备受推崇。

Pinia.js 定位和特点:

  • 完整的 typescript 的支持;
  • 极其轻量,压缩后的体积只有1.6kb;
  • 去除 mutations,只有 stategettersactions(这是我最喜欢的一个特点);
  • actions 支持同步和异步;
  • 没有模块嵌套,只有 store 的概念,能够构建多个 storestore 之间可以自由使用,更好的代码分割;
  • 关联 Vue Devtools 钩子,提供更好地开发体验;
官网地址:https://pinia.vuejs.org/

11. Vue-CoreVideoPlayer

Vue-CoreVideoPlayer是一款基于 vue.js 的轻量级的视频播放器插件插件。

文档地址:https://core-player.github.io/vue-core-video-player/zh/

原文:一些好用的前端小插件(2) - 知乎 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1245864.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】标准模板库STL作业(其二)

🎃个人专栏: 🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础:Java基础_IT闫的博客-CSDN博客 🐋c语言:c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…

了解销售管理系统,看这篇就够了

在充满活力的现代商业环境中,高效的销售管理是成功的关键。 本文将全面介绍销售管理系统 及其对销售流程的变革性影响。 从潜在客户开发和机会管理到分析驱动的决策,销售管理系统旨在为销售团队提供提高生产力和绩效的工具。 本文分为销售管理系统的概念…

在springboot中实现WebSocket协议通信

前面介绍了使用netty实现websocket通信,有些时候,如果我们的服务并不复杂或者连接数并不高,单独搭建一个websocket服务端有些浪费资源,这时候我们就可以在web服务内提供简单的websocket连接支持。其实springboot已经支持了websock…

通俗理解词向量模型,预训练模型,Transfomer,Bert和GPT的发展脉络和如何实践

最近研究GPT,深入的从transfomer的原理和代码看来一下,现在把学习的资料和自己的理解整理一下。 这个文章写的很通俗易懂,把transformer的来龙去脉,还举例了很多不错的例子。 Transformer通俗笔记:从Word2Vec、Seq2S…

解决PDF预览时,电子签章、日期等不显示问题

文章目录 问题描述问题排查问题解决 问题描述 在预览PDF时,部分签章或控件没有显示。如下图: 正确应该要这样: 问题排查 根据网上搜索,排查,我先看看,pdf.worker.js 里的这三行代码,是否已经注…

MySQL-02-InnoDB存储引擎

实际的业务系统开发中,使用MySQL数据库,我们使用最多的当然是支持事务并发的InnoDB存储引擎的这种表结构,下面我们介绍下InnoDB存储引擎相关的知识点。 1-Innodb体系架构 InnoDB存储引擎有多个内存块,可以认为这些内存块组成了一…

error: ‘for‘ loop initial declarations are only allowed in C99 or C11 mode

在使用for循环时,在循环内定义变量,出现如下错误 [Error] ‘for’ loop initial declarations are only allowed in C99 or C11 mode [Note] use option -stdc99,-stdgnu99,-stdc11 or-stdgnu11 to compile your code 出现这个错误…

22款奔驰S400L升级原厂360全景影像 高清环绕 无死角

360全景影像影像系统提升行车时的便利,不管是新手或是老司机都将是一个不错的配置,无论是在倒车,挪车以及拐弯转角的时候都能及时关注车辆所处的环境状况,避免盲区事故发生,提升行车出入安全性。 360全景影像包含&…

2015年8月19日 Go生态洞察:Go 1.5版本发布

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

【C++】内存管理(new与delete)

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 🌝每一个不曾起舞的日子,都是对生命的辜负 前言 本篇文章我们一起来学习C的内存管理方式&…

App 设计工具

目录 说明 打开 App 设计工具 示例 创建 App 创建自定义 UI 组件 打开现有 App 文件 打包和共享 App 本文主要讲述以交互方式创建 App。 说明 App 设计工具是一个交互式开发环境,用于设计 App 布局并对其行为进行编程。 可以使用 App 设计工具&#xff1a…

Leetcode:622. 设计循环队列 题解【具详细】

目录 一、题目: 二、思路详解: 1.循环队列的存储定义 2.循环队列的创建 3.循环队列的判空与判断情况 (1) 循环队列的判空: (2) 循环队列的判满 4.循环队列元素的插入 5.循环队列元素的删除 6.获取队头元素 7.获取队尾元素 8.循环队列释放 三…

手写工作流设计模式,针对常见的工作流步骤流转,减少过多的if/else,提升编程思维

需求 这一年下来,写两次工作流流转,总结下经验。 第一次写的时候,只找到用模版设计模式包裹一下,每个方法都做隔离,但是在具体分支实现的时候,if/else 满屏分,而且因为要针对不同情况&#xff…

【TensorRT部署】pytorch模型(pt/pth)转onnx,onnx转engine(tensorRT)

1. 单帧处理 1. pt2onnx import torch import numpy as np from parameters import get_parameters as get_parameters from models._model_builder import build_model TORCH_WEIGHT_PATH ./checkpoints/model.pth ONNX_MODEL_PATH ./checkpoints/model.onnx torch.set_de…

毛里塔尼亚市场开发攻略,收藏一篇就够了

毛里塔尼亚是非洲西北部的一个国家,也是中国长期援建的一个国家,也是一带一路上的国家。毛里塔尼亚生产生活资料依赖进口,长期依赖跟我们国家的贸易关系也是比较紧密的,今天就来给大家介绍一下毛里塔尼亚的市场开发公路。文章略长…

“关爱零距离.情暖老人心”主题活动

为提高社区老年人的生活质量,促进邻里间的互动与友谊,以及弘扬尊老爱幼的社区精神,11月21日山东省潍坊市金阳公益服务中心、重庆市潼南区同悦社会工作服务中心在潼南区桂林街道东风社区共同在潼南区桂林街道东风社区举办了“关爱零距离.情暖老…

BMS实战: BMS产品介绍,电池外观分析,电芯种类分析,焊接方式分析,充电方式,电压平台,电芯型号分析。

快速入门的办法就是了解产品,了解现在市面上正在流通的成熟产品方案。光看基础知识是没有效果的。 首先我们找到了一张市面上正在出售的电池pack包。 图片来源网上,侵权删 电池外观分析 外壳: 一般是金属外壳,大部分都是铁壳加喷漆,特殊材质可以定制。 提手 一般是…

22款奔驰S400L升级主动式氛围灯 光影彰显奔驰的完美

新款奔驰S级原车自带64色氛围灯,还可以升级原厂的主动式氛围灯,增加车内的氛围效果。主动式环境氛围灯包含263个LED光源,每隔1.6厘米就有一个LED光源,照明效果较过去明亮10倍,视觉效果更加绚丽,它还可结合智…

怎么申请IP地址证书?

IP地址证书,也称为SSL证书,是一种数字证书,用于在网络传输过程中对IP地址进行加密和解密。它是由受信任的证书颁发机构(CA)颁发的,用于证明网站所有者身份的真实性和合法性。 一、选择证书颁发机构。首先需…

计算机是如何执行指令的

计算机组成 现在所说的计算机基本上都是冯诺依曼体系的计算机。其核心原理: 冯诺依曼计算的核心思想是将程序指令和数据以二进制形式存储存储在同一存储器中,并使用相同的数据格式和处理方式来处理它们。这种存储程序的设计理念使得计算机能够以可编程…