Devui

以下是DevUI开源的故事，这个故事可能会很短，因为DevUI品牌从初创到当初也只有5年，开源的工夫只有短短2年，但DevUI与社区开发者的故事却无时无刻不在产生，因而咱们急于把它记录下来。 DevUI团队从2019年6月开始做开源，过后想法很纯正： DevUI在华为云外部服务于大量商用&外部业务，为何不将它开源到社区，让更多业务&用户也能享受到DevUI优良的实际呢？对于DevUI的前世今生以及开源的历程，能够参考之前的文章： DevUI × 掘金 | 技术人的2020 对DevUI组件库王哥的专访 以下是DevUI5年的倒退工夫线： 开源信心从整个倒退历程也能够看出，DevUI团队对做开源的微小信心！ 起步2019年6月在Github开源之后，Ng DevUI在半年之内都没有太大的动静，尽管咱们每个月都从不进行公布新版本，然而关注咱们的开发者始终不多，star数也半年之内始终没有冲破100，其中有很大一部分还是DevUI团队成员本人点的。 不过咱们并没有灰心和放弃，因为 咱们晓得没有什么有价值的事件是能够轻易做胜利的，咱们也晓得轻易放弃意味着真正的失败。所以 咱们也在一直地思考怎么做开源，毕竟咱们也是刚开始做开源，没有教训，简直是摸着石头过河。掘金2020年3月，咱们开始尝试性地在掘金经营DevUI团队的技术专栏，咱们不心愿通过打广告以及其余任何功利性的形式经营DevUI，这不是咱们开源的初衷，咱们心愿能触达开发者，让他们被动意识、理解进而应用、相熟DevUI。 所以掘金经营的初期，咱们从不发软文，全部都是技术干货，这些文章是DevUI团队所有成员个体的智慧结晶和工作教训，和社区大佬相比，不肯定是最好的文章，但 都是大家付出工夫用心写的，所以也缓缓取得了社区小伙伴们的认可。2020年一年工夫内，一共写了39篇文章，其中有6篇是社区的小伙伴Zcating同学奉献的，Zcating是咱们DevUI开源组织的晚期支持者和贡献者，入群工夫比咱们很多DevUI团队成员还早，他 不仅给咱们投稿过技术文章在Ng DevUI我的项目中沉闷而且在Vue DevUI成立初期提供了第一个组件当初也是Button/Modal/Dropdown/Table等多个组件的田主，也是咱们DevUI开源组织的PMC成员。2020年能够说是DevUI开源的元年，正是在这一年，DevUI开始在社区有肯定的曝光度，star数也冲破了500，掘金专栏的关注者也超过了1000。 反思不过咱们的下载量仍然惨不忍睹，只有区区的每周100多，咱们也在一直思考、反思和尝试 为什么那么少人用DevUI呢？国内Angular社区的确不如Vue、React火，但也不至于这么少，国内Angular组件库的确比比皆是，略微做得比拟好的就只有Ng Zorro，这是Ant Design的Angular版本，Ng Zorro每周的下载量超过40000，这阐明国内还是有Angular用户的。 咱们其实并不想与他人竞争，包含Ng Zorro，咱们始终都是单干关系，他们建的Angular中文站点中也挂上了咱们DevUI的链接。 咱们只是想 丰盛Angular的生态，让国内的Angualr用户除了Zorro，会有一个其余的抉择。而且咱们的定位和Zorro也不齐全一样，咱们是 面向ToB企业的工具类产品的，这是咱们的基因，也是咱们的劣势。保持至今咱们仍然没有想明确为什么用DevUI的人那么少，不过这不影响咱们做开源的信心！ 或者 开源是一条漫长的路线，不保持个三年五年，就不要埋怨开源难做，咱们也会始终保持做上来的。也欢送 应用过DevUI的开发者给予咱们更多的输出和反馈，这样咱们也能晓得本人哪里没做好，进而不断改进同样欢送社区的开发者一起参加到DevUI的开源建设中来，一起搭建一个高质量组件库，并欠缺组件库的生态咱们也会始终保持凋谢的心态，承受社区的意见和反馈，一直思考和反思，如何将DevUI的体验、品质做好尝试2021年，在Ng DevUI和Ng DevUI Admin之外，咱们做出了三个重要的尝试：Vue DevUI、B站直播、成立PMC。 Vue DevUIDevUI拓展vue生态并不是拍脑袋的，而是通过慎重考虑的： 2021年开始vue3/vite开始全面暴发，基于vue3/vite的生态在以极快的速度扩充DevUI官网交换群里一直有小伙伴反馈：什么时候出vue版本？DevUI Design是一套从华为云泛滥理论业务中孵化进去的设计体系，Ng DevUI只是这套设计体系在Angular框架上的实现，扩大其余框架的实现也是DevUI的长远规划，包含Vue框架。基于以上思考，咱们感觉：大略是时候了于是在2021年5月正式开始通过社区开源的形式孵化Vue DevUI，具体的状况能够参考咱们之前的文章： 让咱们一起建设 Vue DevUI 我的项目吧！ Vue DevUI 曾经有10个组件成员啦～ 以下是Vue DevUI的仓库数据趋势图： 从趋势图也能够看出 Vue DevUI组件库的倒退是十分迅速的，仅仅半年工夫，诞生了60位contributor，开发了53个组件，超200个PR、1000次提交。以下是Vue DevUI的贡献者列表 感激每一位DevUI的贡献者！ B站在掘金社区混了一年多之后，咱们不仅让社区开发者意识和理解了DevUI，还意识了十分多优良的开发者，其中杨村长就是其中一个。 村长老师是一位Vue专家，并且有着十分丰盛的教学教训，声音好听很有亲和力。 因为偶尔的机会理解到村长在B站做直播，和村长的结识能够参考之前的文章： 跟村长老师做【Vue DevUI 开源指南】直播一个月的感触 跟村长老师的单干十分欢快，间隔第一次和村长的直播已近2个月，一共直播了7次，每一次都是抱着期待的情绪直播的： ...

DevUI是面向企业中后盾产品的开源前端解决方案，其设计价值观基于"至简"、"沉迷"、"灵便"三种天然与人文相结合的理念，旨在为设计师、前端开发者提供规范的设计体系，并满足各类落地场景，是一款企业级开箱即用的产品。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 引言预报了2个星期，DevUI Admin 2.0 终于来了！先来看看黑科技是什么吧！ 在2.0版本中，咱们将区块从Admin中抽离了进去，并且推出了一套对应的Angular CLI去帮忙你应用咱们的区块，让你能够更快更不便地搭建一个基于DevUI Admin的后盾管理系统。后续咱们还会继续丰盛现有的区块，欠缺CLI让其可能帮忙你做更多的事件。 除此之外，咱们还新增了： 动静表单第三方登录，账号注册音讯揭示面板为了让大家疾速将黑科技用起来，咱们特意在B站录制了一段4分钟的教学视频，欢送大家围观～ https://www.bilibili.com/video/BV1o3411z7qi/ 1 DevUI Admin 区块目前DevUI Admin提供了4类共19个内置区块，笼罩表单、列表、图表等丰盛的业务场景。 为了更不便的应用咱们的区块，咱们倡议你先初始化咱们的种子工程，再通过咱们提供给你的 cli 来增加咱们的区块以及基于咱们的区块来搭建一个页面： ng add ng-devui-admin初始化咱们的种子工程之后，别忘了先装置咱们的物料库哦： npm i ng-devui-materials之后你就能够在你的我的项目中通过咱们提供的命令行来进行区块的增加以及页面的创立： ng g ng-devui-admin:blocksng g ng-devui-admin:views在这里你须要晓得咱们区块的名字，你能够返回 Admin 区块 进行查看。 1.1 在页面中增加区块# For Examplecd src/app/pages/getting-started/sampleng g ng-devui-admin:blocks通过应用咱们提供的 ng-devui-admin 命令行，通过简略的命令行操作你就能够将咱们的区块疾速增加到你的页面当中，之后你只须要简略的调整布局或者内容的调整就能够实现页面的搭建，布局的调整能够参考 Admin 布局。 1.2 基于区块创立页面# For Examplecd src/app/pages/getting-startedng g ng-devui-admin:views通过应用咱们提供的 ng-devui-admin 命令行，通过简略的命令行操作你就能够初始化一个页面并增加咱们提供的区块，再将其增加到对应的模块中，之后依据你的须要自行进行调整即可，更多应用能够参考 DevUI Admin。 2 动静表单因为中后盾利用表单需要较多，通过屡次书写繁琐的表单模板进行表单创立，费时费力。DevUI Admin对DevUI组件库的表单组件进行了二次封装，你能够依据咱们规定的对象模型元数据来动静的创立表单。另外，DevUI Admin已内置radio、checkbox、textInput、toggle、select等多个小部件可供选择，在表单内渲染。 ...

月初咱们在掘金同步了 Vue DevUI 的最新进展：Vue DevUI 曾经有10个组件成员啦～ 很快就有超多掘金的小伙伴对 Vue DevUI 开源我的项目感兴趣： 3天之内就有超过100+社区的小伙伴通过增加小助手微信（devui-official）分割到咱们，并退出到咱们的外围开发群，十分欢送大家的退出～5天之内所有61个组件田都被认领完，共有40+小伙伴成为 Vue DevUI 组件库田主～第二天就有新的PR提交上来，10天之内大家就给 Vue DevUI 新添了11名新成员～Vue DevUI 组件库目前的最新版本是v0.1.3 vue-devui@0.1.3 ⚠️留神：该版本还不欠缺，不可用于生产环境。 特别感谢以下小伙伴的奉献： @对半@devin@iel@kagol@LiuSuY@lookforwhat@lwl@mrundef@Roading@Vergil@~zZ.Lucky（这是第二天就提了PR的小姐姐Lucky）新增组件本次版本新增4类共11个组件。 通用Icon 图标 - @kagolSearch 搜寻框 - @lwlStatus 状态 - @LiuSuY反馈Loading 加载提醒 - @对半Toast 全局告诉 - @iel数据录入DatePicker 日期选择器 - @mrundefSelect 下拉抉择框 - @lookforwhat数据展现Card 卡片 - @VergilCarousel 走马灯 - @RoadingProgress 进度条 - @devinRate 评分 - @~zZ.Lucky优化创立 DevUI CLI 解决组件目录构造一致性问题应用 VitePress 重构网站出现在多人协同开发过程中，咱们发现有以下两个问题： 组件的目录构造不对立组件导出文件vue-devui.ts常常会抵触发现这个问题之后，@iel同学被动提出进行优化，通过简略沟通之后，确定了通过创立DevUI CLI脚手架工具来解决以上两个问题，该工具能够： 通过命令行步骤指引的形式疾速创立新组件目录构造，完满解决第一个问题主动创立组件导出文件，并在predev阶段主动执行，这样大家就不必去批改这个文件，这样第二个问题也能失去解决@iel 同学还专门写了一篇掘金文章记录这一过程，十分棒！欢送大家给他点赞反对～ 我为 DevUI 开发的脚手架 ...

DevUI是面向企业中后盾产品的开源前端解决方案，其设计价值观基于"至简"、"沉迷"、"灵便"三种天然与人文相结合的理念，旨在为设计师、前端开发者提供规范的设计体系，并满足各类落地场景，是一款企业级开箱即用的产品。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ DevUI是一款基于DevUI Design设计规范的Angular组件库，开源于2019年，曾经继续保护2年工夫，积淀了61个组件，其中有不少都是业界组件库没有的特色组件。 后面预报了两次，明天 DevUI 12 版本终于来了！降级了最新的 Angular 12 版本，让咱们一起来看看还有哪些新个性吧！ DevUI 12：全面反对 Angular Ivy 新引擎新个性规范化组件间距，变更为4的倍数以更好兼容缩放等计算后的展现成果Select反对多选模式下回车选中/勾销选中TreeSelect反对自定义已选中项模板，反对通过设置checkRelation管制父子节点的选中关系Upload反对抉择文件夹上传，单文件上传胜利后保留文件显示Cascader反对设置appendTobodyButton优化设置宽度后文字过长超出显示范畴Bug修复TreeSelect修复多选模式下设置treeNodeIdKey后无奈删除节点的问题DataTable修复拖拽中容易失焦的问题dragDrop修复无主题设置场景下placeholder无色彩的问题Editorx中文输入法下光标定位等问题修复Tree修复调用checkAllNodes办法无奈扭转半选状态的问题TagsInput修复标签过长无奈删除的问题残缺Changelog：12.0.0版本Changelog 特色组件展播Datepicker Pro 日期选择器组件链接：https://devui.design/componen... 特点介绍Datepicker Pro组件借鉴挪动端，利用鼠标滚轮操作范畴抉择，附加精准地位点击，缩小用户的点击次数，缩短用户对于工夫抉择的操作门路。 性能详情组件提供了单选/范畴类型，反对日期/周/月份/年份的模式，反对各种自定义模板扩大，充沛满足业务简单场景提供日历面板模式，用户可自定义嵌入各类型场景，灵便应用 更具体的介绍能够参考咱们之前的文章： DevUI 11.4.0 公布：DatePickerPro来啦 Category Search 分类搜寻组件链接：https://devui.design/componen... 特点介绍Category Search组件将高频罕用的搜寻过滤内容聚合到一个组件中，造成合乎搜寻过滤的操作模型，缩小页面冗余的搜寻过滤条件的出现，进而升高用户的了解和应用老本 性能详情组件提供多场景菜单模式，不同操作模式下，菜单的展现内容不同： 默认提供类别信息存在类别选中项时，展现该类别的选项详情输入框存在搜寻文本，展现合乎文本的搜寻分类或分类下符合条件的选项组件提供一键清空，过滤器保留，类别过多的列表展现，最大水平兼容各类简单的业务场景 更具体的介绍能够参考咱们之前的文章： CategorySearch分类搜寻组件初体验 Quadrant Diagram 象限图组件链接：https://devui.design/componen... 特点介绍象限图常常用于布局事件的优先级，用于剖析解决数据与冀望的偏离水平等。组件通过拖拽，实现对指标的地位掌控及信息出现。 性能详情组件通过与拖拽的联动，坐标追随线的定位，能够轻松实现标签的挪动，便于使用者进行数据的变更，掌控事项的倒退；组件内置了性能区域，提供标签的放大，放大及象限图全屏的性能；灵便的款式定制能力，用户可依据本人的诉求灵便搭配。 手把手教你如何应用象限图组件 Gantt 甘特图组件链接：https://devui.design/componen... 特点介绍甘特图罕用于多个事务进度的跟踪与治理，每个我的项目以条状图的模式显示，进度与其余工夫相干的停顿的外在关系以可视化模式进行显示。 性能详情根本图形模式出现，以工夫维度显示每个条目之间内在联系，反对bar、bar-parent、milestone三种不同模式条状展现；多种交互反对：条目拖拽、进度更新、工夫范畴更新、快捷跳转、视图变动、全屏等；与table搭配：可与datatable搭配应用，进行更丰盛维度信息出现与治理。 致谢感激对DevUI组件库给予帮助的开发者们，祝大家应用欢快~ 预报DevUI Admin 2.0 版本也将在本月17号重磅公布，提供了一项神奇的黑科技，让咱们刮目相待吧！也欢送大家参加到DevUI生态的建设中来，目前 DevUI 开源生态次要有以下产品： NG DevUI：基于DevUI Design设计规范的Angular组件库DevUI Icons：与DevUI组件库配套应用的字体图标库NG DevUI Admin：开箱即用的企业级中后盾管理系统DevUI Helper：一款VSCode插件，DevUI代码助手，给你带来丝滑的代码补全体验。Vue DevUI：vue3版本DevUI组件库，反对PC/Mobile（目前还在孵化中，欢送参加建设~）

3个月之前，咱们在社区发了一篇文章，正式发动了 Vue DevUI 我的项目。让咱们一起建设 Vue DevUI 我的项目吧！ 很快就有不少酷爱开源的小伙伴参加进来，于是咱们迅速成立了Vue DevUI 核心成员小组，一起探讨出了Vue DevUI组件库的技术栈： ViteVue3TypeScriptJSX到目前为止该小组已倒退到46名成员，Vue DevUI 组件库也新增了10个组件成员，并在npm公布了v0.1.0版本： vue-devui@0.1.0 ⚠️留神：该版本还不欠缺，不可用于生产环境。 特别感谢以下小伙伴的奉献： brenner8023flxy1028kagolto0simpleZcating接下来同步下Vue DevUI目前的停顿状况，欢送感兴趣的小伙伴参加到 Vue DevUI 我的项目的建设中来！ 通过参加 Vue DevUI 我的项目，你能够： 学习最新的 Vite+Vue3+TSX 技术学习如何设计和开发组件参加到开源社区中来结识一群酷爱学习、酷爱开源的敌人新增组件通用组件： Button按钮组件Panel面板组件导航组件： Tabs选项卡组件反馈组件： Alert正告组件数据录入组件： CheckBox复选框组件Radio单选框组件Switch开关组件TagsInput标签输出组件TextInput文本框组件数据展现组件： Avatar头像组件以下是网站的效果图： 具体的 Release Notes 信息能够参考： https://gitee.com/devui/vue-devui/releases/v0.2.0 优化和标准目前 Vue DevUI 组件库我的项目已减少以下标准： Jest 单元测试ESLint 代码标准StyleLint 款式标准ls-lint 文件夹/文件命名标准CommitLint 代码提交标准疾速开始疾速开始三部曲： 装置引入应用装置 vue-devuinpm i vue-devui# npm i vue-devui --registry=https://registry.npm.taobao.org/引入 vue-devuimain.ts import { createApp } from 'vue'import App from './App.vue'// 引入 Vue DevUI 组件库import DevUI from 'vue-devui'import 'vue-devui/style.css'// 应用vue-devuicreateApp(App).use(DevUI).mount('#app')应用 Button 组件App.vue ...

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ DatePickerPro 本次版本咱们带来了升级版的日期选择器，具体有哪些晋升呢？咱们一起来看看吧！ 设计层面： 借鉴挪动端，利用鼠标滚轮个性及精准点击个性，缩小用户操作门路；模块化设计，能够按业务需要拆分重组，搭配疾速抉择区，晋升效率。用户应用层面： 组件提供了单选/范畴类型，反对日期/周/月份/年份的模式，反对各种自定义模板扩大，充沛满足业务简单场景；通过组件封装的形式能够强管控用户的应用办法及款式，同时保障了组件的易用性和一致性；参数及应用形式大部分继承了之前的组件，缩小了用户的迁徙老本。大家快来体验吧！除此之外新版本次要有以下新增个性和BUG修复： 新增个性新增datepicker-pro组件drawer反对自定义模板steps-guide新增beforeChange办法，在setcurrentIndex前置执行，管制该步骤是否显示panel反对暗藏左侧填充transfer减少showOptionTitleAPI来管制鼠标悬浮是否显示title，优化transfer款式category-search在toggleEvent新增参数currentSelecttagalert新增simple类型展现gantt优化按需加载及超出容器主动滚动cascader增加下拉头部自定义模板tree的删除节点办法在虚构滚动模式下反对管制是否立刻更新，兼容大数据量删除的场景以下是 DatePickerPro 的动画成果： 以下是新旧版本日期选择器的比照图： Bug修复category-search修复filterName类型为null时报错,修复局部下拉内容没有title的问题datatable修复checked状态更新的局部问题transfer修复特定条件下状态显示有误的问题popover修复初始化弹出地位计算错误的问题input-number修复高低按钮不能触发正则校验time-axis程度默认文字居中且开端无线，type、status体现和之前对立，修复模板data数据不正确，减少API扭转工夫圈色彩tree-select修复leafOnly条件下，父节点会显示在输入框的bugupload修复oneTimeUpload条件下，上传文件胜利却进入onError事件的bugtree修复beforeAdd办法无奈阻止节点增加的bug欢迎您一起参加DevUI的开源，咱们任何模式的奉献！ 欢送加DevUI小助手微信：devui-official，一起探讨组件技术和前端技术。 欢送关注咱们DevUI组件库，点亮咱们的小星星： https://github.com/devcloudfe/ng-devui 也欢送应用DevUI新公布的DevUI Admin零碎，开箱即用，10分钟搭建一个好看大气的后盾管理系统！ 具体的 Release Notes，请参考： https://github.com/DevCloudFE/ng-devui/releases/tag/11.4.0

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 以下文章和本文相干，兴许你也会喜爱： 《古代富文本编辑器Quill的模块化机制》 《Quill富文本编辑器的实际》 《如何将龙插入到编辑器中？》 《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》 《古代富文本编辑器Quill的内容渲染机制》 《Quill根本应用和配置》 引言这是深入浅出 Quill 系列的第2篇。 上一篇咱们介绍了 Quill 的根本应用和配置，置信大家可能应用 Quill 搭建一个简略的富文本编辑器啦。 不过理论的业务场景可能更简单，有更多定制的需要，Quill 是否满足呢？ Quill 是一款 API 驱动的富文本编辑器，它的内容能够通过API实现齐全的掌控，咱们一起来看看吧。 1 对内容的管制富文本编辑器最根本的操作就是对内容的增/删/改/查，比方： 在编辑器某处减少一些文本选中编辑器中的一部分内容，将其删除选中一部分文本，给它增加某种格局获取其中一部分内容，对其进行转换以上操作间接通过键盘和鼠标很容易操作，然而通过 API 如何实现呢？ 1.1 删先看删的局部，通过deleteText()办法实现，该办法次要有两个入参： index 从哪儿删除length 删除多少内容比方我想把上面的Hello 删除： this.quill.deleteText(0, 6); 又比方我想删除编辑器里的所有内容，但咱们不晓得外面一共有多少内容，是不是须要一个一个数一下呢？ 其实是不须要的，Quill 提供了一个查问编辑器总字符数的办法getLength()（前面介绍查的局部也会讲到）。 所有删除所有内容也很简略： this.quill.deleteText(0, this.quill.getLength());还有一种常见的状况，就是咱们想删除编辑器中选中的内容，这要如何实现呢？ Quill 提供了一个获取编辑器选区的办法getSelection()（前面介绍对选区的管制时会讲到）能够轻松实现： // 获取选区内容所在的index和lengthconst { index, length } = this.quill.getSelection();this.quill.deleteText(index, length); 是不是十分不便呢？ 1.2 查再来看查的局部，Quill 托管了编辑器里所有的内容，因而它对外面的内容一目了然，Quill 晓得： 指定地位有什么内容有多少内容它的格局是什么能够应用getText()办法获取纯文本内容，它的应用形式也后面介绍过的deleteText()和removeFormat()也相似： // 获取指定地位的文本this.quill.getText(0, 6);// 不传入任何参数，能够获取全副文本this.quill.getText();// 获取选中文本const { index, length } = this.quill.getSelection();this.quill.getText(index, length);都晓得有什么内容了，拿到内容的长度就很简略了： ...

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 以下文章和本文相干，兴许你也会喜爱： 《古代富文本编辑器Quill的模块化机制》 《Quill富文本编辑器的实际》 《如何将龙插入到编辑器中？》 《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》 《古代富文本编辑器Quill的内容渲染机制》 引言之前在HWEB大前端技术分享会上给大家分享过 Quill 的一些实际，不过因为工夫关系只讲了个大略，后续打算深入浅出地对 Quill 做一个具体的介绍。 这个系列打算从实际的角度去讲 Quill 富文本编辑器，先从 Quill 的根本应用开始吧！ 极简形式应用 Quill疾速开始三部曲： 装置引入应用// 装置npm i quill<div id="editor"></div>// 引入import Quill from 'quill';// 应用const quill = new Quill('#editor');尽管咱们曾经初始化了 Quill 实例，然而在页面中却什么也看不到。 尽管看上去什么也没有，然而咱们点击空白处，会发现有一个光标，并且能够输出内容，并给内容减少格局（因为没有工具栏，只能通过 Quill 快捷键Ctrl+B减少格局），以下是动画成果： 尽管只是一个极简版的富文本编辑器，不过加上边框和按钮，就是一个根底版的掘金评论框（还差插入表情和图片） 这是应用 Quill 最简略的形式。 加一些配置选项吧配置编辑器容器元素 containerQuill 类一共有两个参数，第一个参数是必选的编辑器容器元素container，能够是一个CSS选择器，比方后面的#editor，也能够是一个DOM元素，比方： const container = document.getElementById('editor');// const container = document.querySelector('#editor');// const container = $('#editor').get(0);const quill = new Quill(container);如果容器外面曾经有一些 HTML 元素，那么初始化 Quill 的时候，那些元素也会渲染进去，比方： ...

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 引言5月份掘金最火的文章应该就是大帅老师的《产品经理：你能不能用div给我画条龙？ 》 过后我正在一边吃饭一边刷手机，看到大帅老师在群里发的这篇文章，立马放下了筷子，过后就有预感此文必火，于是看到一半立马点了赞。 果然，这篇文章十分受欢迎，曾经半个多月过来了，仍然能在掘金首页的热门举荐里看到这篇文章 正好前两天在公司的HWEB大前端分享会上给大家分享了富文本编辑器的一些实际，于是想： 是否把这条龙插入到富文本编辑器中呢？在富文本编辑器中插入自定义内容在之前的文章中，给大家分享了如何在Quill中插入自定义的内容，咱们一起来回顾下： 第一步：自定义工具栏按钮第二步：自定义Blot内容第三步：在Quill注册自定义Blot第四步：调用Quill的API插入自定义内容咱们试着依照这个步骤来将龙插入到编辑器中。 第一步：自定义工具栏按钮这个非常简单： const TOOLBAR_CONFIG = [ [{ header: ['1', '2', '3', false] }], ['bold', 'italic', 'underline', 'link'], [{ list: 'ordered' }, { list: 'bullet' }], ['clean'], ['card', 'divider', 'emoji', 'file', 'tag'], ['dragon'], // 新增的];自定义工具栏按钮图标： const dragonIcon = `<svg>...</svg>`;const icons = Quill.import('ui/icons');icons.dragon = dragonIcon;减少工具栏按钮事件： const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: { container: TOOLBAR_CONFIG, handlers: { ... // 减少一个空的事件 dragon(value): void { console.log('dragon~~'); }, }, } },});第二步：自定义Blot内容（外围）之前的分享提到： ...

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 引言富文本编辑器大略是最简单、应用场景却极广的组件了。 能够说富文本编辑器让Web数据录入充斥了有限的设想空间，如果只有文本框、下拉框这些纯文本的数据录入组件，那么Web的数据录入能力将极大地受限。咱们将无奈在网页上插入图片、视频这些富文本内容，更无奈插入自定义的内容。 富文本编辑器让Web内容编辑变得更轻松、更高效，咱们简直能够在富文本编辑器中插入任何你想插入的内容，图片、视频、超链接、公式、代码块，都不在话下，甚至还能够插入表格、PPT、思维导图，甚至3D模型这种超简单的自定义内容。 富文本编辑器的场景在Web上也是随处可见，写文章、写评论、意见反馈、录需要单，都须要应用到富文本。 本文联合DevUI团队在富文本组件中的实际，从应用场景、技术选型，再到对Quill的扩大，以及Quill的基本原理，跟大家分享Quill富文本编辑器的那些事儿。 本文次要由以下局部组成： 富文本编辑器的应用场景技术选型咱们为什么抉择Quill如何扩大QuillQuill基本原理以下内容来自Kagol在华为 HWEB 大前端技术分享会上的演讲。 富文本编辑器的应用场景博客文章Wiki词条工作项形容测试用例步骤反馈意见评论… 技术选型咱们的需要： 开源协定敌对Angular框架或框架无关灵便可扩大反对插入/编辑表格和图片插件丰盛，生态好 选型剖析首先排除官网不保护的UEditor而后排除React框架专属的Draft.js和Slate接着排除开源协定不敌对的CKEditor因为咱们的业务场景丰盛，须要富文本插入/编辑表格的性能，所以还须要排除不反对表格的Trix，弱反对表格的Etherpad和Prosemirror，以及表格性能免费的TinyMCE最初只剩下Quill和wangEditor两款编辑器可选，wangEditor的扩展性和生态不如Quill，所以最终抉择Quill作为富文本组件的基座为什么抉择Quill？BSD协定，商业敌对文档具体，上手快API驱动，扩展性好插件丰盛，生态好文档具体Document：https://quilljs.com/ 介绍Quill的API： 介绍如何扩大Quill： 上手快装置Quill：npm i quill引入款式：@import 'quill/dist/quill.snow.css';引入Quill：import Quill from 'quill';初始化Quill：new Quill('#editor', { theme: 'snow' });效果图： API驱动，扩展性好 插件丰盛，生态好 扩大Quill插入标签比方我想在编辑器里插入标签 上传附件比方我想在编辑器里插入附件 插入表情比方我想在编辑器中插入表情 相似语雀的评论：https://www.yuque.com/yuque/blog/sguhed 共性分割线比方我想插入B站这种个性化的分割线 超链接卡片比方我想插入知乎这样的超链接卡片 如何插入表情？咱们从如何插入表情动手，一起看看怎么在Quill中插入自定义的内容。 要在Quill中插入表情，只须要以下四步： 第一步：自定义工具栏按钮第二步：自定义Blot内容EmojiBlot第三步：在Quill注册EmojiBlot第四步：调用Quill的API插入表情第一步：自定义工具栏按钮const quill = new Quill('#editor', { theme: 'snow', modules: { // 配置工具栏模块 toolbar: { container: [ …, [ 'emoji' ] ], // 减少一个按钮 handlers: { // 增加按钮的解决逻辑 emoji() { console.log('插入表情'); } } }, }});给工具栏按钮减少图标// 扩大Quill内置的icons配置const icons = Quill.import('ui/icons');icons.emoji = ‘<svg>…</svg>’; // 图标的svg能够从iconfont网站复制成果如下： ...

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的抉择！ 引言搜寻性能，我想很多业务都会波及，这个性能的特点是： 用户能够在输入框中输出一个关键字，而后在一个列表中显示该关键字对应的数据；输入框是能够随时批改/删除全副或局部关键字的；如果是实时搜寻（即输出完关键字马上出后果，不须要额定的操作或过多的期待），接口调用将会十分频繁。实时搜寻都会面临一个通用的问题，就是： 浏览器申请后盾接口都是异步的，如果先发动申请的接口后返回数据，列表/表格中显示的数据就很可能会是错乱的。问题重现最近测试提了一个搜寻（PS：此处的搜寻就是用 DevUI 新推出的 CategorySearch 组件实现的）相干的缺点单，就波及到了上述问题。 这个bug单大抵意思是： 搜寻的时候，间断疾速输出或者删除关键字，搜寻后果和搜寻关键字不匹配。从缺点单的截图来看，本意是要搜寻关键字8.4.7迭代】，表格中的理论搜寻后果是8.4.7迭代】过关键字的数据。 缺点单的截图还十分贴心地贴了两次申请的信息： 作为一名“有教训的”前端开发，一看就是一个通用的技术问题： 浏览器从服务器发动的申请都是异步的；因为前一次申请服务器返回比较慢，还没等第一次申请返回后果，后一次申请就发动了，并且迅速返回了后果，这时表格必定显示后一次的后果；过了2秒，第一次申请的后果才慢悠悠地返回了，这时表格谬误地又显示了第一次申请的后果；最终导致了这个bug。怎么解决呢？ 在想解决方案之前，得想方法必现这个问题，靠后盾接口是不事实的，大部分状况下后盾接口都会很快返回后果。 所以要必现这个问题，得先模仿慢接口。 模仿慢接口为了疾速搭建一个后盾服务，并模仿慢接口，咱们抉择 Koa 这个轻量的 Node 框架。 疾速开始Koa 应用起来十分不便，只须要： 新建我的项目文件夹：mkdir koa-server创立 package.json：npm init -y装置 Koa：npm i koa编写服务代码：vi app.js启动：node app.js拜访：http://localhost:3000/编写服务代码应用以下命令创立 app.js 启动文件： vi app.js在文件中输出以下 3 行代码，即可启动一个 Koa 服务： const Koa = require('koa'); // 引入 Koaconst app = new Koa(); // 创立 Koa 实例app.listen(3000); // 监听 3000 端口拜访如果没有在3000端口启动工作服务，在浏览器拜访： http://localhost:3000/ 会显示以下页面： ...

DevUI Design 是从华为云 DevCloud 泛滥业务孵化进去的一套设计体系，DevUI 提倡沉迷、灵便、至简的设计价值观，提倡设计者为实在的需要服务，为少数人进行设计，回绝哗众取宠、取悦眼球的设计。 目前曾经基于这套设计体系，开源了 NG DevUI 组件库，社区有很多开发者喜爱咱们的组件库，并且心愿 DevUI 能推出一套 Admin 零碎（还有小伙伴被动提出帮忙测试，非常感谢和打动），能开箱即用，能定制主题等。 为了不负青睐 DevUI 的小伙伴们的冀望，DevUI 团队通过数月的孵化和内部测试， 终于在木棉花开的4月底，公布了 DevUI Admin V1.0 版本，反对自定义主题、国际化、布局定制、Mock数据等多个个性。对于DevUI Admin V1.0版本的具体介绍能够参考一下文章：https://juejin.cn/post/6956155033410863134 也欢送大家试用DevUI Admin：https://devui.design/admin/ DevUI Admin 公布之后，可恶的小伙伴们又对咱们提出了更高的要求： 心愿 DevUI 可能提供 Vue 的版本的 DevUI。一方面咱们是受宠若惊的，开发者对咱们有要求和期待，阐明还是有人关注咱们的 DevUI 的，去年刚有开源想法时，咱们也有过彷惶和放心： 国内的Angular生态没有Vue/React丰盛，会不会没人关注咱们，没人应用咱们的组件库大家都没有开源教训，也不晓得怎么让开发者晓得咱们、进而理解咱们，团队都是开发，也没人懂经营另一方面咱们也感到肩上的担子又重了一些。 不过 DevUI 不违心辜负大家的期待，由 DevUI 组件库外围开发 Kagol 同学发动了 Vue DevUI 我的项目：https://gitee.com/kagol/vue-devui（Github拜访慢，所以迁徙到了Gitee） 当初正式面向社区招募酷爱开源的小伙伴一起建设 Vue DevUI！不论你是富有经验的开发者，还是刚接触前端开发的萌新； 不论你应用Vue框架，还是React，抑或是Angular； 都没有关系，只有你有一颗酷爱开源的心，放弃对技术的激情，咱们都欢送你退出进来！ 你提的每一个PR，咱们都会认真检视，并提出改良意见，目前曾经有多名社区的开发者参加到Vue DevUI我的项目的建设中来了，十分期待你的退出！ 通过参加 Vue DevUI 我的项目，你能够： 学习最新的 Vite+Vue3+TSX 技术学习如何设计和开发组件参加到开源社区中来结识一群酷爱学习、酷爱开源的敌人感兴趣的小伙伴能够增加小助手的微信：devui-official，拉你进 Vue DevUI 外围开发群。 ...