TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！

news2024/9/24 21:27:18

本文由体验技术团队Kagol老师原创~
我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。

TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。

TinyVue 3.15.0 正式发布，推出全新的 Charts 图表组件底座📊，功能更强、图表更丰富！

本次 3.17.0 版本主要有以下重大变更：

  • 增加 FluentEditor 富文本编辑器：一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了表格、图片、超链接、复制粘贴、插入表情、文件上传、@提醒、斜杆菜单等丰富的模块和格式，框架无关、兼容 Quill API、兼容 Quill 模块生态。
  • 增加 @opentiny/vue-directive 子包，用来存放实用的公共指令，并抽取 v-auto-tip 指令。
  • 增加 @opentiny/vue-runtime 子包，用来存放 pc / mobile / mobile-first 等多种格式的组件库 runtime。
  • 基于 Select 组件封装轻量级的 BaseSelect 下拉选择组件，移除下拉树、下拉表格功能，只包含基本的下拉选择功能，并给 BaseSelect 增加 panel 插槽，用于扩展多种形态的下拉选择场景。

详细的 Release Notes 请参考：https://github.com/opentiny/tiny-vue/releases/tag/v3.17.0

本次版本共有12位贡献者参与开发，其中 @zhangpaopao0609 / @Rainer-Yu / @Zcating / trueLoving 是新朋友👏

  • zhangpaopao0609 - 新增贡献者✨
  • Rainer-Yu - 新增贡献者✨
  • Zcating - 新增贡献者✨
  • trueLoving - 新增贡献者✨
  • kagol
  • zzcr
  • gimmyhehe
  • Davont
  • betavs
  • wuyiping0628
  • You-Hw-Y
  • James-9696

也感谢新老朋友们对 TinyVue 的辛苦付出！

你可以更新 @opentiny/vue@3.17.0 进行体验！

我们一起来看看都有哪些更新吧！

增加 FluentEditor 富文本编辑器

2024年4月17日，Quill 2.0 正式发布！

重回铁王座！时隔5年！Quill 2.0 终于发布啦🎉

Quill 是一款 API 驱动、支持格式和模块定制的开源 Web 富文本编辑器，目前在 GitHub 的 Star 数是 42.4k（开源富文本编辑器里 Star 数最高的）。

而 Quill 内置能力相对比较弱，无法完全满足企业级应用的复杂编辑场景，我们基于 Quill 2.0 封装了一个功能强大、开箱即用的 FluentEditor 编辑器，在 Quill 基础上扩展了表格、图片、超链接、复制粘贴、插入表情、文件上传、@提醒、斜杆菜单等丰富的模块和格式，框架无关、兼容 Quill API、兼容 Quill 模块生态。

FluentEditor 主要有以下特点和优势：

  • 包含30多种丰富的模块和格式，除了 Quill 内置的21种格式之外，还扩展和增强了表格、图片、超链接、字数统计、表情、文件上传、复制粘贴、@提醒、斜杆快捷菜单、截图等15种模块和格式。
  • 强大的表格功能，支持在工具栏插入指定行列的表格、表格行高/列宽拖拽、插入行/列、删除行/列、合并/拆分单元格等丰富的表格操作。
  • 与框架无关，可以在 Vue、React、Angular 等多种框架中使用。
  • 兼容 Quill 所有 API，兼容 Quill 生态模块和格式。

适用于所有有富文本编辑场景的业务，比如需求管理平台、Wiki、博客系统、工单系统等。

我们还基于 FluentEditor 封装了 Vue FluentEditor 组件，使用起来非常方便。


# 安装依赖
npm i @opentiny/vue-fluent-editor


<script setup lang="ts">
// 引入 TinyVue FluentEditor 组件
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
</script>

<template>
  <tiny-fluent-editor></tiny-fluent-editor>
</template>

效果图：
在这里插入图片描述

增加 @opentiny/vue-directive 子包

为了将 TinyVue 内部能力尽可能外溢，我们封装了一个通用指令包，将原本只在组件库内部使用的指令暴露出来给更广大的开发者使用，比如文本提示指令 v-auto-tip，后续也会将更多指令开放出来。


<template>
  <div class="auto-tip" v-auto-tip>超出省略隐藏，鼠标移入是会有ToolTip提示</div>
</template>

<script setup>
import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
</script>

<style scoped>
.auto-tip {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

效果图：

在这里插入图片描述

增加 @opentiny/vue-runtime 子包

之前 TinyVue 只有全量的 runtime 包（包含了 pc / mobile / mobile-first 等多个模板），只会导致 runtime 包体积很大，影响加载性能，为了有效减少 runtime 包的体积，提升性能，增加了分模板构建的脚本，如果你是 PC 端应用，可以只引入 Runtime PC。

增加轻量级的 BaseSelect 下拉选择组件

我们先来看下 Select 组件的现状和问题：

  • Select 组件中耦合了 Tree / Grid 两个重型组件，分别对应下拉树和下拉表格两个特性，render-type="tree" | "grid"
  • 下拉树和下拉表格并不是常态，普通的下拉列表才是常态，这就导致了大量只使用Select简单功能的业务包体积也很大，影响业务性能
  • 依赖了 Select 的组件，比如 Area，间接地等于依赖了 Select / Grid / Tree，导致包体积变大
  • 本来应该依赖基于 Select 组件的组件，比如 Pager，由于 Select 耦合了 tree/grid，因此只能自己实现一个 Select，造成重复代码

我们使用 Vite 创建一个空的 Vue 项目，对比下不同情况下构建产物体积情况：

产物体积(css+js, 单位kB)gzip之后的产物体积(单位kB)
不引入TinyVue组件5623
只引入Select组件1777424
只引入Tree组件789190
只引入Grid组件1217302
只引入Button31091
只引入Area组件(依赖Select)1783425

可以看到：

  • 只引入 Select 组件，产物里面却同时包含了 tree/grid 两个组件，导致产物体积很大
  • Area 组件本身只是一个很简单的组件，由于引入了 Select，导致产物体积也非常大

因此为了优化 Select 组件性能，减小包体积，有必要对其进行重构，但又不能引入破坏性变更，以免影响到现有的使用了 Select 组件的业务。

这就是我们封装 BaseSelect 的初衷。

BaseSelect 组件目前已经封装完成，增加了 panel 插槽，并补充了对应的文档和E2E测试用例（所有62个E2E测试用例均已通过），BaseSelect的API保持和Select完全一致，如果你的Select组件没有配置 render-type 属性，可以直接替换成 BaseSelect。

在这里插入图片描述

如果你的项目中只用了基本的下拉选择功能，没有下拉树和下拉表格，那么欢迎使用更加轻量化的 BaseSelect 组件🤝。

后续我们会基于 BaseSelect 的 panel 插槽扩展 TreeSelect 下拉树和 GridSelect 下拉表格。

贡献者招募

2024年，我们规划了很多新组件和新特性，欢迎朋友们一起参与共建。

可以在以下 discussion 进行任务认领：

TinyVue 2024年规划：https://github.com/opentiny/tiny-vue/discussions/645

关于OpenTiny

在这里插入图片描述

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

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

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

相关文章

算法2--贪心算法

算法2--贪心算法

1.老鼠和猫的交易 小老鼠准备了M磅的猫粮&#xff0c;准备去和看守仓库的猫做交易&#xff0c;因为仓库里有小老鼠喜欢吃的五香豆。 仓库有N个房间&#xff1b; 第i个房间有 J[i] 磅的五香豆&#xff0c;并且需要用 F[i] 磅的猫粮去交换&#xff1b; 老鼠不必交换该房间所有的五…
阅读更多...
笔记 5 ：linux 0.11 注释，函数 copy_mem() , copy_process () , 中断函数 int 80H 的代码框架

笔记 5 ：linux 0.11 注释，函数 copy_mem() , copy_process () , 中断函数 int 80H 的代码框架

&#xff08;38&#xff09;接着介绍一个创建进程时的重要的函数 copy_mem&#xff08;&#xff09; 函数&#xff1a; &#xff08;39&#xff09; 分析另一个关于 fork&#xff08;&#xff09; 的重要的函数 copy_process&#xff08;&#xff09;&#xff0c;与李忠老师的操…
阅读更多...
暑期-大数据人工智能学习-在线实习项目

暑期-大数据人工智能学习-在线实习项目

这个暑期 默默努力一把 悄悄惊艳所有人 在线企业项目试岗实训 助你突破固有思维模式&#xff0c;伴你进阶成长
阅读更多...
MySQL索引特性(下)

MySQL索引特性(下)

目录 索引的理解 理解单个Page 理解多个Page 页目录 单页情况 多页情况 复盘一下 聚簇索引VS非聚簇索引 区别 索引操作 主键索引 唯一索引的创建 普通索引的创建 查询索引 删除索引 索引创建原则 索引的理解 理解单个Page MySQL 中要管理很多数据表文件&#xff0c;而…
阅读更多...
阿里云ECS跨区域迁移，利用老操作系统作为新服务操作系统

阿里云ECS跨区域迁移，利用老操作系统作为新服务操作系统

由于特殊原因或者数据备份需要迁移ecs服务器 1.老服务快照 选择ecs实例&#xff0c;点开实例 进入云盘 https://ecs.console.aliyun.com/disk 在云盘上点击建立快照 2.准备oss同源 购买oss 存储&#xff0c;用于临时备份 https://oss.console.aliyun.com/bucket/ 记得必…
阅读更多...
Spring如何进行动态注册Bean

Spring如何进行动态注册Bean

在Spring框架中&#xff0c;Bean是应用程序的核心组成部分&#xff0c;而BeanDefinition则是这些Bean的元数据表示。随着应用程序的复杂性增加&#xff0c;我们可能需要更灵活地定义和注册Bean。Spring框架提供了几个扩展点&#xff0c;允许我们以编程方式影响Bean的创建和定义…
阅读更多...
Window中 Redis下载安装

Window中 Redis下载安装

Redis7.2.3连接&#xff1a; 我用夸克网盘分享了「redis-windows-7.2.3.zip」&#xff0c;点击链接即可保存。打开「夸克APP」&#xff0c;无需下载在线播放视频&#xff0c;畅享原画5倍速&#xff0c;支持电视投屏。 链接&#xff1a;https://pan.quark.cn/s/4dfb0497707a 在安…
阅读更多...
Uniapp基础篇(持续更新)

Uniapp基础篇(持续更新)

1. Uni-app常用内置组件 view 视图容器 scroll-view 可滚动视图区域&#xff0c;用于区域滚动。需注意在webview渲染的页面中&#xff0c;区域滚动的性能不及页面滚动。 swiper 滑块视图容器。一般用于左右滑动或上下滑动&#xff0c;比如banner轮播图。 image uniapp官方iam…
阅读更多...
封装网络请求 鸿蒙APP HarmonyOS ArkTS

封装网络请求 鸿蒙APP HarmonyOS ArkTS

一、效果展示 通过在页面直接调用 userLogin(params) 方法&#xff0c;获取登录令牌 二、申请网络权限 访问网络时候首先需要申请网络权限&#xff0c;需要修改 src/main 目录下的 module.json5 文件&#xff0c;加入 requestPermissions 属性&#xff0c;详见官方文档 【声明权…
阅读更多...
Flink底层原理解析：案例解析（第37天）

Flink底层原理解析：案例解析（第37天）

系列文章目录 一、flink架构 二、Flink底层原理解析 三、Flink应用场景解析 四、fink入门案例解析 文章目录 系列文章目录前言一、flink架构1. 作业管理器&#xff08;JobManager&#xff09;2. 资源管理器&#xff08;ResourceManager&#xff09;3. 任务管理器&#xff08;Ta…
阅读更多...
Hadoop安装报错

Hadoop安装报错

报错&#xff1a;ERROR 2023-03-09 21:33:00,178 NetUtil.py:97 - SSLError: Failed to connect. Please check openssl library versions. 解决方案: 在安装失败得客户端执行 编辑 /etc/python/cert-verification.cfg 配置文件&#xff0c;将 [https] 节的 verify 项 设为禁用…
阅读更多...
【教学类-67-02】20240716毛毛虫ABB排序

【教学类-67-02】20240716毛毛虫ABB排序

背景需求&#xff1a; 【教学类-67-01】20240715毛毛虫AB排序-CSDN博客文章浏览阅读584次&#xff0c;点赞16次&#xff0c;收藏6次。【教学类-67-01】20240715毛毛虫AB排序https://blog.csdn.net/reasonsummer/article/details/140443310 在AB排序基础上&#xff0c;继续制作…
阅读更多...
【JavaEE精炼宝库】 初识网络原理——网络通信基础 | 协议

【JavaEE精炼宝库】 初识网络原理——网络通信基础 | 协议

文章目录 一、网络发展史1.1 独立模式&#xff1a;1.2 网络互连&#xff1a;1.3 局域网&#xff08;LAN&#xff09;&#xff1a;1.4 广域网&#xff08;WAN&#xff09;&#xff1a; 二、网络通信基础2.1 IP地址&#xff1a;2.2 端口号&#xff1a; 三、协议3.1 协议的概念&am…
阅读更多...
RabbitMQ：基础篇

RabbitMQ：基础篇

1.RabbitMQ是高性能的异步通讯组件 何为异步通讯 打电话就是同步通讯&#xff0c;微信聊天可以理解为异步通讯&#xff0c;不是实时的进行通讯&#xff1a;时效性差。 同步调用的缺点&#xff1a; 拓展性差&#xff08;需求不尽提&#xff09; 性能下降 级联失败 …
阅读更多...
实时高清无延迟：EasyDSS/EasyCVR无人机直播技术重塑赛事新体验

实时高清无延迟：EasyDSS/EasyCVR无人机直播技术重塑赛事新体验

近日有网友发视频称&#xff0c;在内蒙古呼伦贝尔一景区的马术表演现场&#xff0c;一架无人机擅自在场地上空飞行拍摄。现场工作人员多次制止飞行无果&#xff0c;一名表演者骑马用弓箭将无人机射落。 在数字科技日新月异的今天&#xff0c;无人机直播推流技术以其独特的视角…
阅读更多...
在GPU上运行PyTorch

在GPU上运行PyTorch

文章目录 1、查看GPU的CUDA版本2、下载CUDA版本3、安装cuDNN4、配置CUDA环境变量5、安装配置Anaconda6、使用Anaconda7、pycharm导入虚拟环境8、安装带GPU的PyTorch⭐9、总结 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#x…
阅读更多...
字节跳动十年经验老鸟，耗时大半年整理的软件测试面试真题【附答案】

字节跳动十年经验老鸟，耗时大半年整理的软件测试面试真题【附答案】

软件测试工程师&#xff0c;和开发工程师相比起来&#xff0c;虽然前期可能不会太深&#xff0c;但是涉及的面还是比较广的。前期面试实习生或者一年左右的岗位&#xff0c;问的也主要是一些基础性的问题比较多。涉及的知识主要有MySQL数据库的使用、Linux操作系统的使用、软件…
阅读更多...
回溯算法的去重问题

回溯算法的去重问题

概述 在利用回溯算法去求子集、排列、组合等问题时&#xff0c;所给数组中如果包含重复元素&#xff0c;需要进行去重操作。常用的去重方法是使用used数组或集合。 对于上述子集、排列、组合等问题的求解方法是将数组转化为树的形式&#xff0c;利用递归和回溯的方法进行求解…
阅读更多...
10.1 JSP语言入门

10.1 JSP语言入门

JSP语言入门 目录一、 基础概念1. 什么是JSP&#xff1f;2. 工作原理3. 基本语法 二、 表达式语言&#xff08;EL&#xff09;1. 简介2. 语法 三、 JSTL&#xff08;JSP Standard Tag Library&#xff09;1. 简介2. 核心标签库3. 常用标签 四、 高级话题1. 会话管理2. 自定义标…
阅读更多...
卷积神经网络（一）-LeNet-5

卷积神经网络（一）-LeNet-5

前言 LeNet开启了卷积神经网络的第一枪&#xff0c;这一网络模型由Yann LeCun等人在1998年提出&#xff0c;被视为卷积神经网络的开山之作。 论文地址&#xff1a; http://yann.lecun.com/exdb/publis/pdf/lecun-01a.pdf 如果打不开就看csdn&#xff1a; https://download.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023