Location>code7788 >text

TinyVue v3.17.0 is officially released, introducing a rich text editor based on Quill 2.0, powerful and ready to use out of the box!

Popularity：149 ℃/2024-08-03 09:22:29

Hello, I'm Kagol.

We are very pleased to announce that on June 26, 2024, theTinyVue Posted.v3.17.0 🎉。

TinyVue Every major version release will bring you some useful new features. In the last version, we refactored chart-core, added CircleProcessChart, CircleProcessChart and other 6 new chart components, and added Statistic data statistics component.

TinyVue 3.15.0 is officially released with a brand new Charts charting component base 📊, which is more powerful and chart-rich!

This 3.17.0 release has the following major changes:

  • Add FluentEditor Rich Text Editor: A rich text editor based on Quill 2.0 that extends Quill'stabular、photograph、hyperlink, link、copy and paste、Insert an emoticon、File Upload、@Reminder、Skew-bar menuThe Quill module ecosystem is framework-agnostic, Quill API-compatible, and Quill module ecosystem-compatible, with a rich set of modules and formats.
  • rise@opentiny/vue-directive subpackage, which is used to hold utility public commands, and extracts thev-auto-tip Instructions.
  • rise@opentiny/vue-runtime Subpackage to store component library runtime in pc / mobile / mobile-first formats.
  • Encapsulate the lightweight BaseSelect dropdown selection component based on the Select component, remove the dropdown tree and dropdown table functions, and only include the basic dropdown selection functions, and add panel slots to BaseSelect, which can be used to extend the dropdown selection scenarios in various forms.

Please refer to the detailed Release Notes:/opentiny/tiny-vue/releases/tag/v3.17.0

A total of 12 contributors were involved in the development of this release, of which@zhangpaopao0609 / @Rainer-Yu / @Zcating / trueLoving It's a new friend!

  • zhangpaopao0609 - New contributors✨
  • Rainer-Yu - New contributors✨
  • Zcating - New contributors✨
  • trueLoving - New contributors✨
  • kagol
  • zzcr
  • gimmyhehe
  • Davont
  • betavs
  • *ping0628
  • You-Hw-Y
  • James-9696

And thanks to friends old and new for their hard work on TinyVue!

You can update@opentiny/[email protected] Conduct the experience!

Let's take a look at what updates have been made!

Add FluentEditor Rich Text Editor

On April 17, 2024, Quill 2.0 was officially released!

Back on the Iron Throne! Quill 2.0 is finally released after 5 years 🎉!

Quill is an API-driven, open-source web rich text editor that supports format and module customization, and currently has a GitHub Star count of 42.4k (the highest Star count in open-source rich text editors).

While Quill's built-in capabilities are relatively weak and can't fully meet the complex editing scenarios of enterprise-level applications, we packaged a powerful, out-of-the-box FluentEditor editor based on Quill 2.0, which extends Quill with a rich set of modules and formats, such as tables, images, hyperlinks, copy-paste, insertion of emoticons, file uploads, @reminders, and slash menus, etc. Framework-independent, compatible with the Quill API, and compatible with the Quill module ecosystem. It is framework-independent, compatible with the Quill API, and compatible with the Quill module ecosystem.

FluentEditor has the following main features and benefits:

  • Includes more than 30 rich modules and formats. In addition to Quill's 21 built-in formats, it extends and enhances 15 modules and formats such as tables, images, hyperlinks, word count, emoticons, file uploads, copy and paste, @ reminders, slash bar shortcuts, screenshots, and more.
  • Powerful table features, support in the toolbar to insert the specified rows and columns of the table, table row height/column width drag and drop, insert rows/columns, delete rows/columns, merge/split cells and other rich table operations.
  • Framework independent, can be used in Vue, React, Angular and many other frameworks.
  • Compatible with all Quill APIs, Quill eco-modules and formats.

Suitable for all businesses with rich text editing scenarios, such as requirements management platforms, wikis, blogging systems, work order systems, etc.

We have also wrapped a Vue FluentEditor component based on FluentEditor, which is very easy to use.

# Install dependencies
npm i @opentiny/vue-fluent-editor

<script setup lang="ts">
// pull into TinyVue FluentEditor subassemblies
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
</script>

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

Rendering:

rise@opentiny/vue-directive subcontract

In order to maximize the spillover of TinyVue's internal capabilities, we've wrapped up a generic directive package that exposes directives that would otherwise only be used within the component library to a wider audience, such as the text prompt directivev-auto-tip, and more commands will be opened up subsequently as well.

<template>
  <div class="auto-tip" v-auto-tip>Hide beyond omission，Mouse-over is going to beToolTipdraw attention to sth.</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>

Rendering:

rise@opentiny/vue-runtime subcontract

Previously, TinyVue only had a full runtime package (containing multiple templates such as pc / mobile / mobile-first etc.), which would only result in a large runtime package volume and affect loading performance. In order to effectively reduce the volume of the runtime package and improve the performance, we have added a sub-template build script, so that if you are a PC-side application, you can only introduce the Runtime PC.

Add lightweight BaseSelect dropdown selection component

Let's take a look at the current state and problems with the Select component:

  • The Select component is coupled with two heavy components, Tree / Grid, which correspond to the characteristics of a drop-down tree and a drop-down table, respectively.render-type="tree" | "grid"
  • Dropdown trees and dropdown tables are not the norm, ordinary dropdown lists are the norm, which leads to a large number of business packages that only use the simple functionality of Select are also very large, affecting the performance of the business.
  • Components that depend on Select, such as Area, indirectly depend on Select / Grid / Tree, resulting in larger package sizes.
  • Components that should rely on components based on the Select component, such as Pager, have to implement a Select of their own due to the fact that the Select is coupled with a tree/grid, resulting in duplicate code.

Let's create an empty Vue project using Vite and compare the build product volumes under different scenarios:

Product volume (css+js, in kB) Volume of the product after gzip (in kB)
Not introducing TinyVue components 56 23
Introducing only the Select component 1777 424
Introducing only the Tree component 789 190
Introducing only the Grid component 1217 302
Introducing only Button 310 91
Introducing only the Area component (dependent on Select) 1783 425

It can be seen:

  • Only the Select component is introduced, but the product contains both tree/grid components, resulting in a very large product.
  • The Area component itself is a very simple component, and the introduction of Select has resulted in a very large product.

consequentlyTo optimize Select component performance and reduce package sizeThe Select component is a component that can be refactored without introducing disruptive changes that would affect existing businesses that use the Select component.

That's why we wrapped BaseSelect in the first place.

The BaseSelect component has now been wrapped, with the addition of the panel slot, and supplemented with the corresponding documentation and E2E test cases (all 62 E2E test cases have been passed), and the BaseSelect API is kept exactly the same as that of Select, so if your Select component does not have a configuredrender-type property, which can be directly replaced with BaseSelect.

If you are using only basic dropdown selection functionality in your project, without dropdown trees and dropdown forms, then feel free to use the more lightweight BaseSelect component 🤝.

Later we will extend TreeSelect dropdown trees and GridSelect dropdown tables based on the panel slot of BaseSelect.

Contributor Recruitment

In 2024, we are planning a lot of new components and features, and we welcome our friends to participate in building them together.

Tasks can be claimed at the following discussion:

TinyVue 2024 Planning

Welcome to the OpenTiny open source community.

Add WeChat small assistant: opentiny-official, together to participate in the co-construction!

Open source is not easy, please giveTinyVue A Star ⭐ for encouragement and thank you for your great support of our OpenTiny!

Source Code:/opentiny/tiny-vue

Contact Us

GitHub：/opentiny/tiny-vue(Welcome Star ⭐)

Official website:/tiny-vue

Station B:/15284299

Personal Blog:/blogs

Small assistant WeChat: opentiny-official

Public: OpenTiny

<Previous Next>