vue-quill-editor 自动获取焦点问题

最新推荐文章于 2024-09-02 17:46:45 发布
最新推荐文章于 2024-09-02 17:46:45 发布
阅读量2.3k 收藏 3
点赞数 2
分类专栏： vue quill 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32209081/article/details/116494669
版权
当vue-quill-editor接收到接口返回的内容时，会自动聚焦。为避免此行为，可在接口调用前禁用聚焦，在内容加载完成后启用。具体实现是在组件的mounted阶段进行操作。
摘要由CSDN通过智能技术生成

vue-quill-editor 在获取到接口传过来的内容之后会获取焦点，所以 思路就是调用接口之前先禁止获取焦点，获取到内容之后再开启。
放到mounted中

this.$refs.myQuillEditor.quill.enable(false);

接口调用之后 并获取到内容之后调用

this.$nextTick(()=>{
最低0.47元/天 解锁文章
程序开发猿
关注
专栏目录
解决vue-quill-editor初始化自动聚焦问题
weixin_58207509的博客
11-01 3219
当我们页面需要重置数据时 会发现quill-editor的验证自动触发提示信息 很显然这个自动获取特别讨厌 以下是我在网络上收集来的解决方法 第一步初始化时令vue-quill-editor失效 mounted() { this.$refs.text.quill.enable(false) }, 第二步点击富文本框时令quill-editor生效，并聚焦 <quill-editor ref="text" v-model="...
vue-quill-editor 图片上传处理
且听风吟的博客
09-01 1万+
vue-quill-editor 将图片转为base64编码，当图片比较大时，提交后台时参数过长，导致提交失败。 把富文本内的图片动态上传到服务器，然后把图片加载到富文本编辑器。这样一来，图片标签内只需要存储图片的网络地址。 <template> <div class="quill-editor"> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" :action="uploadUrl" n
富文本编辑器自动聚焦问题 quill
TomNumber的博客
06-18 1217
富文本编辑器取消自动聚焦
Editor打开页面就会自动获取焦点如何解决
最新发布
BWCX_NLFD_K的博客
09-02 194
【代码】Editor打开页面就会自动获取焦点如何解决。
vue-quill-editor自动获取焦点问题解决办法
m0_59128154的博客
09-07 4234
问题: 在 vue 项目中使用 vue-quill-editor 时, 总会发生富文本自动获取焦点的情况, 有时可能会导致进入富文本所在页面时, 页面不在最顶端的尴尬状况… 原因: vue-quill-editor 富文本插件在我们 发起 ajax 请求成功并且有数据回填（或富文本内容改变）的操作后 就会 自动获取焦点; 解决办法: 由此可知, 我们只需在 vue-quill-editor 富文本插件 发起 ajax 请求成功并且有数据回填的操作后 失去焦点即可, 代码如下: async editSh.
vue-quill-editor自动获取焦点，页面自动滚动到editor的位置
LumingC的博客
04-16 4181
quill-editor自动获取焦点，页面自动滚动到editor的位置的问题解决，在nextTick中取消焦点，并用jq滚动回页面顶部。 this.$nextTick(function() { this.$refs.myQuillEditor.quill.blur(); $('.main_content').scrollTop(0); });...
vue-quill-editor 富文本编辑器踩坑: 页面滚动条受焦点影响
2301_81772570的博客
05-05 494
富文本会自动获取焦点,导致进入页面时,页面滚动条会滚动到富文本位置。 // 解决办法: 初始化的时候禁用掉,500MS后再解除。
vue-quill-editor富文本编辑器取消自动获取焦点
weixin_42574985的博客
10-20 1736
/解决富文本自动聚焦。这样打开之后就不是富文本的位置了。
Vue-Quill-Editor富文本编辑器的使用教程
10-17
import { quillEditor } from "vue-quill-editor"; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; // 或者 'quill/dist/quill.bubble.css' 选择你喜欢的主题 ``` 在模板中，使用`quill...
Vue项目中quill-editor带样式编辑器的使用方法
08-29
在Vue项目中集成quill-editor，可以实现一个强大的富文本编辑器，允许用户添加样式、图片和视频。本文将详细讲解如何在Vue中使用vue-quill-editor组件，并着重介绍如何自定义图片和视频的插入方式。 首先，确保已经...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
11-19
假设你已经知道如何引入vue-quill-editor，并且遇到了跟我一样的问题（如上图），显示出来的图标排列不整齐，字体，文字大小选择时超出边框。你可以试试下面这种解决办法 。 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。 @import “../../node_modules/quill/dist/quill.snow.css”; 然后在组件中添加class名 —— class=“ql-editor”。 <quill class=”ql-editor”></quill> 你就会看到错乱的图标样式已经改变，如下图： 样式排
Vue获取Quill的焦点
qq_28353055的博客
01-10 1958
1.html代码片段 &lt;div class="quill-editor" ref='textfocus' @focus="parentidfocus" style="width:100%;height:330px;" v-model="content" v-quill:myQuillEditor="editorOption" &gt;
vue-quill-editor 解决vue3富文本编辑器初始化自动聚焦
qq_38243173的博客
12-13 375
vue3完美解决vue-quill-editor初始化自动聚焦问题
ruoyi 富文本编辑器Quill-取消自动聚焦
RD_Xiaobai的博客
09-30 2219
ruoyi 富文本编辑器Quill-取消自动聚焦问题(附上完整富文本代码)，富文本代码实现：计数/限制插入图片数量/取消自动聚焦等等，具体功能请看代码
quill-editor 富文本编辑器使用及焦点巨坑
Summer_JK的博客
07-07 3858
quill-editor 富文本编辑器使用及焦点巨坑 一、npm安装依赖 npm install vue-quill-editor --save 二、全局引用，项目入口文件中main.js引入，如下： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dis
vue-quill-editor焦点处理
weixin_41711593的博客
04-09 2153
目录 前言 一、改进办法 前言 作者在使用vue-quill-editor过程中发现一个坑，就是vue-quill-editor渲染完成后，会自动获取焦点，这很不合理，对于有很多输入框的界面，如果你的富文本较多，进入页面后直接给你滚到页面底部，用户体验不好。 作者用的是3.0.6版本，不知后续有没有改进这个bug 一、改进办法 作者把vue-quill-editor单独写了一个组件，作者在父组件赋值后，把焦点定位到其他input上，解决了直接定位到vue-quill-editor的bug.
vue-quill-editor富文本编辑器使用步骤
热门推荐
qq_44782585的博客
03-18 6万+
vue-quill-editor的安装和配置，实现工具栏自定义数据格式，以及鼠标经过提示中文释义
vue-quill-editor自定义标签使用
lovethewind_1的博客
03-31 2377
当我们使用vue-quill-editor时(quill也一样)，需要添加插入音频和视频资源，这时我们可以自定义video和auido标签，动态赋值并使用 话不多说，立即上代码 引入 import { Quill, quillEditor } from 'vue-quill-editor' 自定义类 const BlockEmbed = Quill.import('blots/block/embed') // 添加插入视频 class VideoBlot extends Bl...
vue-quill-editor使用中图片上传优化与element-ui集成
在Vue应用中使用vue-quill-editor富文本编辑器时，开发者可能会遇到一些问题，本文将着重讨论在结合vue、element-ui、vue-quill-editor以及图片上传功能时遇到的挑战。当用户在编辑器中插入图片时，由于vue-quill-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值