TinyVue v3.17.0 正式釋出，推出了一款基於 Quill 2.0 的富文字編輯器，功能強大、開箱即用！

Kagol發表於2024-08-03
VueUI

你好，我是 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元件 56 23
只引入Select元件 1777 424
只引入Tree元件 789 190
只引入Grid元件 1217 302
只引入Button 310 91
只引入Area元件(依賴Select) 1783 425

可以看到：

  • 只引入 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年規劃

歡迎加入 OpenTiny 開源社群。

新增微信小助手：opentiny-official，一起參與共建！

開源不易，請給 TinyVue 點個 Star ⭐ 鼓勵下，感謝你對我們 OpenTiny 的大力支援！

原始碼：https://github.com/opentiny/tiny-vue

聯絡我們

GitHub：https://github.com/opentiny/tiny-vue（歡迎 Star ⭐）

官網：https://opentiny.design/tiny-vue

B站：https://space.bilibili.com/15284299

個人部落格：https://kagol.github.io/blogs

小助手微信：opentiny-official

公眾號：OpenTiny

相關文章