vue-json-editor使用时，光标位置发生偏移

已于 2024-03-26 16:09:38 修改
阅读量298 收藏
点赞数 2
分类专栏： 前端心得 文章标签： vue.js json
于 2024-03-26 15:46:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25685775/article/details/137046362
版权
文章讲述了在Vue项目中使用vue-json-editor时遇到的光标偏转问题，经排查发现是由于项目中的font-family样式影响。解决方法是将font-family设置为特定值。问题源于JsonEditor的二次封装，且该问题普遍与字体样式配置有关。
摘要由CSDN通过智能技术生成

        某些vue项目中，需要开发编写JSON的功能；网上查了一下，比较好的是vue-json-editor；但是使用过程中发现某个问题，会导致用户感官不太好。

        最开始我以为是自己那儿没用对，结果仔细看了它的说明文档，发现没用错，毕竟它的配置太少了。然后怀疑是不是什么样式影响到了，相关样式已排查，还真是样式影响了，让人无语的是影响的样式还是font-family，我是一点都没想到。嘛，既然找到了就解决问题，只要把font-family设置为droid sans mono, consolas, monospace, courier new, courier, sans-serif这些就行了。

        问题解决后，我又好奇字体其他配置会不会影响，发现都会有这个问题，瞬间反应过来，可以是插件对字体大小是固定宽度计算的。好奇之下，我去看了下源码，发现它是基于荷兰人Jos de Jong写的JsonEditor进行二次封装。嘛，算了，不找了。就这样。

总结：vue-json-editor是JsonEditor进行二次封装，如果使用这两个发现了光标发生偏转，大多数情况是自己项目的字体样式相关配置问题

夜晚的天
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Vue实现JSON编辑器
m0_71723001的博客
11-22 2579
点击中括号、花括号、大括号时会高亮显示另一半支持括号、双引号自动补全。
解决json-editor-vue3光标错位问题
bigbigpigsobig的博客
10-07 552
json-editor-vue3插件光标错位问题
jsoneditor光标错位的原因及解决方式
marko39的专栏
10-07 880
jsoneditor光标错位的原因及解决方式
vue3+json-editor-vue3实现JSON编辑器
最新发布
qq_54072355的博客
06-20 1721
开发的vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。注：本项目中，按钮样式、成功失败提示，使用了 Ant-Design-Vue，按需安装插件。1. 安装插件 @originjs/vite-plugin-commonjs。四. 关于：vue3+ts无法渲染，报错。2. vite.config.js 内。五. 完整项目代码
vue2-ace-editor、monaco-editor 光标位置错误问题
Meditate_MasterYi的博客
02-22 2523
巴拉巴拉
vue wangEditor出现光标乱跳的问题
Benz_s600的博客
07-12 978
原理是: 在用户输入时 会首先触发change事件 传回父组件 父组件再传回来 触发watch监听事件 只需要在change的时候修改一个标志位的 true 然后利用这个标志位去判定是否修改 editor的html 因为editor的html一旦触发 光标会默认跳到最后。在封装的editor组件中。
vue实现鼠标右键菜单，解决菜单栏位置偏移的问题
q2056105280的博客
05-17 2968
1、先了解鼠标点击偏移的几个属性。 clientY 指的是距离可视页面左上角的距离，受页面滚动的影响。 pageY 指的是距离可视页面左上角的距离，不受页面滚动影响。 screenY 指的是距离电脑屏幕左上角的距离。 layerY 指的是距离元素的左上角距离，受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角，找到它或它父级元素中最近具有定位的左上角距离。 offsetY 指的是距离它自己左上角的距离，计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性。 .
vue-json-editor:Json编辑器视图
04-08
<vue-json-editor :value="jsonData" @change="onDataChange"></vue-json-editor> import VueJsonEditor from 'vue-json-editor'; export default { components: { VueJsonEditor }, data() { return { ...
vue-json-edit：作为vue组件构建的Visual JSON编辑器。 提供基本的GUI
02-03
Vue-Json编辑 ...import JsonEditor from 'vue-json-edit' Vue . use ( JsonEditor ) 道具 objData：json数据 选项 ConfirmText：确认按钮的字符串 cancelText：取消按钮的字符串 例 单文件组件 < template
vue-json-ui-editor.zip
04-04
1. **安装**：通过npm或yarn将vue-json-ui-editor添加为项目的依赖。 2. **引入组件**：在你的Vue组件中引入Vue JSON UI Editor，并根据需要设置Schema。 3. **配置和渲染**：将Schema传递给编辑器组件，它会自动...
vue-json-editor-2:Json编辑器视图
04-09
npm install vue-json-editor-2 ``` **2. 开发模式与生产环境** 为了在开发环境中运行应用，你可以使用 `npm run serve` 命令，这将启动一个本地开发服务器并开启热重载功能，这意味着每当代码发生变化时，浏览器会...
vue-json-excel
05-07
入门获取包装： npm install vue-json-excel 在您的vue应用入口点注册JsonExcel： import Vue from "vue" ;import JsonExcel from "vue-json-excel" ;Vue . component ( "downloadExcel" , JsonExcel ) ; 在您的模板...
【前端】Vue项目中 JSON 编辑器的使用
No8g攻城狮的博客
06-01 4306
现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。以下是列举了几种，可以根据风格或者喜好随意选择其中的一种即可。如果有兴趣的话，每一种都可以试着写下哦。 2.2 示例代码 2.3 效果图 以下是vue2版本的依赖，如果需要vue3请自行查询对应的版本然后安装对应的依赖 3.2 示例代码 3.3 效果图 官网：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor 4.2 示例代码 4.3 效果图 5.2
json-editor-vue3 (Json字段编辑器 )
热门推荐
weixin_46022934的博客
09-11 1万+
一、安装插件(这里很正常) 二、json-editor-vue3的使用步骤(这里遇到了问题) 1.导入json-editor-vue3 ①:导入json-editor-vue3(问题出现) ②:解决 (无法找到模块的问题) 2.使用json-editor-vue3 ①步骤说明 ②编写代码如下 ③内容如下图所示: 总结: json-editor-vue3的Api说明 全局引入 组件内引入 模板使用 常见参数 对应的事件
vue 使用JSON 编辑器： vue-json-editor
qq_37831545的博客
06-12 6863
vue 使用JSON 编辑器： vue-json-editor。
vue3中json编辑器
qq_40934617的博客
11-12 6369
vue3的第三方插件 实现json编辑器 安装依赖 npm i vue3-ace-editor 引入 import {reactive,defineComponent} from 'vue' import {VAceEditor} from 'vue3-ace-editor'; import "ace-builds/webpack-resolver"; import 'ace-builds/src-noconflict/mode-json'; import 'ace-build
vue3.0中前端怎么使用 JSON编译器
weixin_49826079的博客
07-31 1115
import JsonEditorVue from 'json-editor-vue3' // 导入模块。components: { JsonEditorVue}, // 注册组件。1.安装JSON编辑器，引入第三方插件。//转化成后端所需要的格式。2.在项目中引入该插件。// 转化格式 并展示。// 这是拿到的数据。
在vue项目中使用 JSON 编辑器： vue-json-editor
千里之行，始于足下！
09-02 6325
vue-json-editor
vue-json-editor使用介绍
05-09
Vue-Json-Editor 是一个 Vue.js 的 JSON 编辑器组件，它提供了一个用户友好的界面，使用户可以轻松地编辑和查看 JSON 数据。 以下是使用 Vue-Json-Editor 的步骤： 1. 安装 Vue-Json-Editor ``` npm install vue-json-editor --save ``` 2. 引入 Vue-Json-Editor 组件 ```javascript import JsonEditor from 'vue-json-editor' ``` 3. 在 Vue 组件中使用 JsonEditor ```javascript <template> <div> <JsonEditor v-model="jsonData" :options="editorOptions" /> </div> </template> <script> import JsonEditor from 'vue-json-editor' export default { components: { JsonEditor }, data() { return { jsonData: {}, editorOptions: { mode: 'tree', modes: ['code', 'text', 'tree', 'view'], onChange: () => { console.log('数据已修改') } } } } } </script> ``` 以上就是 Vue-Json-Editor 的基本使用方法，其中 `v-model` 可以用来双向绑定 JSON 数据，而 `options` 则可以用来配置编辑器的选项，比如编辑器模式、可选模式以及数据修改回调函数等。 更多使用示例和选项配置可以参考官方文档：https://github.com/dmuy/Vue-JSON-Editor/blob/master/README.zh-CN.md
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜晚的天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值