DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！

以下文章和本文相关，也许你也会喜欢：

《现代富文本编辑器Quill的模块化机制》

《Quill富文本编辑器的实践》

《如何将龙插入到编辑器中？》

《今天是儿童节，整个贪吃蛇到编辑器里玩儿吧》

《现代富文本编辑器Quill的内容渲染机制》

引言

返利 https://www.cpa5.cn/

之前在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基本使用和配置 - DevUI相关推荐

quill一些插件的配置注意事项
为了方便,是用了vue-quill-editor作为富文本编辑器,但是他和一些插件的安装有注意点: 1.在vue.config.js中修改配置 var webpack = require('webpa ...
现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
【华为云技术分享】现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
vue2中quill、vue-quill-editor、quill-better-table案例
主文件 <template><div style="width: 100%; height: 100%;"><div ...
vue-quill-editor + element-ui upload实现富文本图片上传
代码贴上 <template><divclass="quill-editor-example"><divclass="box"&g ...
html富文本编辑器插件_vue中使用vuequilleditor富文本编辑器
点击上方"小姚同学技术栈"快速关注我哟! vue-quill-editor是一个基于quill.适用于vue的富文本编辑器开源项目,支持服务端渲染和单页应用.目前项目热度还算可以, ...
改造vue-quill-editor：结合element-ui上传图片到服务器
前排提示:现在可以直接使用封装好的插件vue-quill-editor-upload 需求概述 vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时 ...
vue富文本框（插入文本、图片、视频）的使用
今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正. 我这里使用的是Element-ui的上传图片组件首先引入Element-ui(这个我就不作赘述了,详情参考e ...
Quill编辑器内置样式配置
import Quill from 'quill'; // 对齐方式 let Parchment = Quill.import('parchment'); let options = {scope: ...

Quill基本使用和配置 - DevUI

引言

极简方式使用 Quill

Quill基本使用和配置 - DevUI相关推荐

最新文章

热门文章