- 综合排序
- 最热优先
- 最新优先
- 来自专栏华创信息技术
vue-quill-editor样式丢失
文章时间：2021年5月11日 14:04:50 解决问题：Quill在页面中样式丢失，无法显示富文本样式 ps：用富文本的情况有很多，例如在后台管理系统排版好的富文本页面，准备在移动端页面去显示， 给容器增加一个class ql-editor，才能正常显示，另外前面是主题类名，不同的主题显示不同的样式 <link href="https://cdn.bootcdn.net/ajax/libs/<em>quill</em> /2.0.0-dev.4/<em>quill</em>.snow.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/<em>quill</em>/2.0.0 -dev.4/<em>quill</em>.bubble.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/<em>quill</em>/2.0.0- /pre> 在线CDN地址：https://www.bootcdn.cn/<em>quill</em>/ 参考教程： vue-<em>quill</em>-editor富文本内容在页面中样式丢失：https://blog.csdn.net
2K10编辑于 2022-05-28 - 来自专栏李维亮的博客
vue-quill-editor 简单配置demo
项目main.js文件引入 import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css ' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* /dist/quill.core.css' // import 'quill/dist/quill.snow.css' // import 'quill/dist/quill.bubble.css ' // import { quillEditor } from 'vue-quill-editor' export default { name: "editor-demo", quill instance object', this.editor) // } } </script> <style scoped> .saveBtn{ float: right
1.8K10编辑于 2022-04-07 - 来自专栏calvin
Quill编辑器介绍及扩展
的地方加上下面的js代码 import Quill from 'quill' var Size = Quill.import('attributors/style/size'); // Size.whitelist 则使用 Quill.import('attributors/style/align');替换默认的，如果使用class：则使用 Quill.import('attributors/class/align = ['right', 'center', 'justify']; Quill.register(Align, true); // Quill.register (MyBold, true); Quill.register("formats/bold", MyBold, true); Quill.register( "formats/italic", MyItalic, true); vm.quill = new Quill(vm.
4.4K20发布于 2018-11-20 - 来自专栏技术社区
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
先看效果图：画面太美哈哈哈 1、下载Vue-Quill-Editor npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor需要依赖 ） npm install quill --save 3、代码 <template>
<quill-editor ></template> <script> import { quillEditor } from "vue-quill-editor"; //调用编辑器 import 'quill /dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; export "; //调用编辑器 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist3.8K31编辑于 2022-06-16 - 来自专栏全栈修仙之路
Quill 富文本编辑器简介
什么是 Quill Quill 是一个免费的，开源的 WYSIWYG （What You See Is What You Get）编辑器，专为现代网络而打造。 Quill 附带了合理的默认设置，你只需几行 Javascript 代码即可立即使用它： var quill = new Quill('#editor', { modules: { toolbar: Quill。 Quill Quill 允许通过多种方式来定制它以满足你的需求，下面我们来介绍一下 Quill 所支持的配置项。 = new Quill('#editor'); 总结 Quill 是一款功能强大的富文本编辑器，本文基于 Quill 的官方文档简单介绍了该编辑器相关的基础知识。
5.1K20发布于 2019-11-06 - 来自专栏程序员的园——原创文章
高频交易中常用的日志库——Quill
之前已经介绍过spdlog，见文章开源库推荐——spdlog 今天要给大家介绍的是另一个高性能的日志库——Quill。 Quill的性能真如描述的那样好吗？ 请看如下数据： Quill Quill是一个高性能的C++日志库，它提供了强大的日志记录功能和灵活的配置选项。 特别是在高并发和实时性要求较高的场景下，Quill的优势尤为明显。 异步处理：Quill的异步处理机制是其核心特性之一。 #include "quill/Backend.h" #include "quill/Frontend.h" #include "quill/LogMacros.h" #include "quill/sinks = quill::Frontend::create_or_get_sink<quill::FileSink>("d://file_sink.log"); quill::Logger* uniform_logger
53000编辑于 2025-03-10 - 来自专栏个人积累
Quill编辑器自定义字体和字体大小
Quill编辑器的使用 1. 引入依赖 cnpm install vue vue-quill-editor 2. import { Quill, quillEditor } from 'vue-quill-editor' //引入自定义字体样式font.css import '.. /dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import 改动1 修改字体大小,文件路径在 *\node_modules\quill\dist路径下的quill.core.js 文件里 大概在6115行,可以直接搜索size修改 var SizeClass = 改动2 文件路径在 *\node_modules\quill\dist路径下的quill.js 文件里修改 ?
3K20发布于 2020-10-15 - 来自专栏Springboot框架学习
Vue实战Vue-Quill-Editor富文本编辑器
Vue-Quill-Editor，这是一款基于Quill、适用于Vue的富文本编辑器。 1.安装Vue-Quill-Editor 接下来我们看一下怎么安装Vue-Quill-Editor富文本编辑器，首先用cmd运行打开vue的项目路径。 运行Vue-Quill-Editor的安装语句 npm install vue-quill-editor -S 2.在vue页面中引入vue-quill-editor import 'quill/dist /quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; import { quillEditor, // Quill } from 'vue-quill-editor'; import * as Quill from 'quill' //引入编辑器
1.8K20编辑于 2022-08-17 - 来自专栏柠檬先生
vue-quill-editor 自定义图片上传和视频上传
安装 npm install vue-quill-editor --save 在main.js 引入 import 'quill/dist/quill.core.css' import 'quill/ dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 在页面中引入 // 页面引入 import { quillEditor } from 'vue-quill-editor' // 配置项
1.5K10发布于 2021-09-26 - 来自专栏小尘哥的专栏
nuxt中富文本编辑器【vue-quill-editor】的集成
百度搜一下“VUE 富文本编辑器”，五花八门，N多种，推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的，结合起来更顺手。 vue-quill-editor简单轻巧又开源，可自己随意订制，因此选了后者。下面简单说一下怎么使用。 先上最终效果，如图： ? ? 2、插件js编写 在plugins下创建nuxt-quill-plugin.js，内容如下： ? 然后在nuxt.config.js中引入该插件 ? 3、组件使用 在页面中引入如下 ? ? 当然这不是终极解决办法，不过vue-quill-editor同样支持服务端渲染，稍候再做研究。 各位看官有什么意见建议，欢迎随时骚扰~~~
2.2K30发布于 2018-08-15 - 来自专栏全栈程序员必看
Vue轻量级富文本编辑器-Vue-Quill-Editor
先看效果图：女神镇楼 图片 下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill（Vue-Quill-Editor 需要依赖） npm install quill --save 代码 <template>
<quill-editor ></template> <script> import { quillEditor } from "vue-quill-editor"; //调用编辑器 import 'quill /dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; export "; //调用编辑器 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist2.1K20编辑于 2022-08-15 - 来自专栏vue封装H5
Vue 实现对quill-editor组件中的工具栏添加title
前言：quill-editor组件中的工具栏都是英文，而且最难受的时没有title提示，要怎样给他添加title，并且是中文的title提示呢？ 一、创建一个quill-title.js文件 ①、在其中插入以下代码 const titleConfig = { 'ql-bold':'加粗', 'ql-color':'颜色', 'ql-font v-model="content" > </quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor 补充知识：自定义设置vue-quill-editor toolbar的title属性 直接看代码吧~ const titleConfig = { 'ql-bold':'加粗', 'ql-color' /set-quill-title.js' //addQuillTitle(); --use in mouted //自定义 set title
1.9K00编辑于 2022-03-08 - 来自专栏JVMGC
36.2K Star开源一款强大的所见即所得富文本编辑器,用过的人都说好
实时协作: Quill允许多个用户同时编辑文本，并实时同步更新，以便团队成员之间共享和协作。 自定义工具栏: 开发者可以根据具体需求自定义Quill的工具栏，以提供最适合应用程序的编辑功能。 使用步骤 以下是使用Quill的基本步骤： 下载和导入: 从Quill的GitHub仓库下载最新版本的软件包，并在你的项目中导入所需的文件。 var quill = new Quill('#editor', { theme: 'snow' // 样式主题，可以根据需要选择 }); 配置和自定义: 根据需要对编辑器进行配置和自定义。 var content = quill.root.innerHTML; // 获取编辑器内容 quill.root.innerHTML = "Hello Quill!" ; // 设置编辑器内容 以上是Quill软件的简要介绍、核心功能和基本使用步骤。希望这些信息能够帮助你了解并开始使用Quill编辑器。
66820编辑于 2023-08-10 - 来自专栏全栈程序员必看
vue富文本编辑器的使用_elementui富文本
'quill' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css '' : val if (this.Quill) { this.Quill.pasteHTML(this.currentValue) } } }, immediate: true } }, mounted $refs.editor this.Quill = new Quill(editor, this.options) this.Quill.pasteHTML(this.currentValue) this.Quill.on $refs.editor.children[0].innerHTML const text = this.Quill.getText() const quill = this.Quill this.currentValue $emit('on-change', { html, text, quill }) }) this.Quill.on('text-change', (delta, oldDelta, source)
2.9K10编辑于 2022-11-04 - 来自专栏DevUI团队
【玩转腾讯云】现代富文本编辑器Quill的模块化机制
通过阅读本文，你将收获： 了解Quill模块是什么，怎么配置Quill模块 为什么要创建Quill模块，怎么创建自定义Quill模块 Quill模块如何与Quill进行通信 深入了解Quill的模块化机制 Quill模块初探 使用Quill开发过富文本应用的人，应该都对Quill的模块有所了解。 Quill模块是一个普通的JS类 那么Quill模块是什么呢？我们为什么要了解和使用Quill模块呢？ Quill模块其实就是一个普通的JavaScript类，有构造函数，有成员变量，有方法。 模块加载机制 对Quill模块有了初步的理解之后，我们就会想知道Quill模块是如何运作的，下面将从Quill的初始化过程切入，通过工具栏模块的例子，深入探讨Quill的模块加载机制。 （本小结涉及Quill源码的解析，有不懂的地方欢迎留言讨论） Quill类的初始化 当我们执行new Quill()的时候，会执行Quill类的constructor方法，该方法位于Quill源码的core
2.5K00发布于 2021-04-29 - 来自专栏用户9257747的专栏
36k star，一款可以灵活自定义的开源的富文本编辑器，太牛了！
今天给大家推荐一个非常好的，一款强大的富文本编辑器：Quill.js 这个编辑器是一个具有跨平台和跨浏览器支持的富文本编辑器 它是目前 GitHub 上 Star 数最多的所见即所得 Web 编辑器， -- Include Quill stylesheet --> <link href="https://cdn.quilljs.com/1.0.0/<em>quill</em>.snow.css" rel="stylesheet -- Include the <em>Quill</em> library --> <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script> <! -- Initialize Quill editor --> <script> var editor = new Quill('#editor', { modules: { toolbar: '#toolbar' }, theme: 'snow', }); </script> 3开源地址 https://github.com/quilljs/quill
1.2K30编辑于 2023-09-04 - 来自专栏全栈程序员必看
vue富文本编辑器tinymce_vue移动端富文本编辑器
vue-quill-editor基本配置 npm install vue-quill-editor -s main.js中引入 import VueQuillEditor from 'vue-quill-editor ' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css $refs.myQuillEditor.quill; // 如果上传成功 if (res.code == 200) { // 获取光标所在位置 let length = quill.getSelection "; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css $refs.myQuillEditor.quill; // 如果上传成功 if (res.code == 200) { // 获取光标所在位置 let length = quill.getSelection
4.1K20编辑于 2022-11-04 - 来自专栏web全栈
vue组件——富文本编辑器
或者在项目根路径的命令框下 npm install vue-quill-editor --save 挂载 vue-quill-editor 插件 全局挂载 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles 导入富文本编辑器对应的样式 import 'quill/dist /quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor ' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from -- 富文本编辑器组件 --> <quill-editor v-model="addForm.goods_introduce" ref="myQuillEditor"></quill-editor>
4.3K10编辑于 2022-09-24 - 来自专栏前端资源
ReactQuill富文本编辑器汉化及工具栏增加title
React-Quill 具有许多强大的功能，包括： 跨平台支持： React-Quill 可以跨平台使用，包括 Windows、Mac 和 Linux。 可扩展性： React-Quill 是可扩展的，您可以轻松地添加自己的自定义工具栏按钮或模块。 但 React-Quill 是基于 Quill 的 React 组件，不支持国际化，所以很多地方需要汉化。 我基于 React-Quill 组件封装了一个文本编辑器，并增加了中文汉化和工具栏 title 属性 中文汉化 Quill 默认使用英文界面，为了方便中文用户使用，我将其汉化成了中文。 使用方法 您可以通过以下步骤使用我二次开发的 React-Quill 文本编辑器： 1、安装 react-quill ： npm install react-quill 2、在您的 React 应用中导入
3.6K21编辑于 2024-01-19 - 来自专栏Czy‘s Blog
初探富文本之OT协同实例
同样是以quill与slate两款开源编辑器为例，在quill中已经实现了对于其数据结构delta的所有Transformation，可以直接调用官方的quill-delta包即可；对于slate而言， /tree/master/packages/ot-quill，首先简单看一下目录结构(tree --dirsfirst -I node_modules): ot-quill ├── public │ 在quill的实现中主要是将quill实例化，注册光标的插件，随机生成id的方法，以及通过id获取随机颜色的方法。 在quill与ShareDB客户端通信的实现中，主要是完成了对于quill与doc的事件监听，主要是Op与Cursor相关的实现。 Quill.register("modules/cursors", QuillCursors); // 注册光标插件 export default new Quill("#editor", { //
89420编辑于 2023-05-26
腾讯云开发者
