vue2-ace-editor、monaco-editor 光标位置错误问题

已于 2022-02-23 23:50:17 修改
阅读量2.4k 收藏 1
点赞数 2
分类专栏： 工作中的零碎知识 文章标签： vue.js javascript 前端
于 2022-02-22 19:24:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meditate_MasterYi/article/details/123075207
版权

背景：

"monaco-editor": "^0.20.0",  
"monaco-editor-webpack-plugin": "^1.9.0",
或者：
"vue2-ace-editor": "0.0.13"
"vue-template-compiler": "^2.6.11",

以上两个均为在线编辑器出现同样问题；

问题描述 如题，如下图 光标位置错误

在这里插入图片描述

可能的解决办法：

删除全局初始化样式中的 div 元素样式，或者删除font-family和font-size样式；
在这里插入图片描述
其它可能原因

Meditate_MasterYi
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-testcase-minder-editor vue2.0思维导图实例
04-28
使用vue-testcase-minder-editor插件+vue2.0实现的思维导图实例
Ace-editor 输入内容时光标闪动，定位错乱的解决方案
weixin_30652879的博客
01-04 1599
请尝试将字体设置成12PX或者14px（偶数），避免设置成13px。 应该就可以解决。 同时向大家推荐一款可直接生成文档的API调试、管理工具（中文PostMAN）：https://www.apipost.cn/ 转载于:https://www.cnblogs.com/phpwechat/p/10219456.html...
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue-monaco：Vue.js的MonacoEditor组件
02-06
维摩纳哥 是支持VS Code的代码编辑器，由于此项目，现在可以作为Vue组件<MonacoEditor> 。 安装 npm install vue-monaco 要么 yarn add vue-monaco 用法 将ESM版本与Webpack一起使用 使用 ： // webpack.config.js const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' ) module . exports = { plugins : [ new MonacoEditorPlugin ( { //
vue2-monaco-editor
04-06
vue2-monaco-editor Vue2.0 + Monaco Editor 实现在 web 页面中编辑 C#代码,并包含代码提示功能 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and fixes files yarn lint Customize configuration See . 参考资料
Vue 使用Ace 编辑器光标位置错误
weixin_57467236的博客
01-24 622
Vue 使用Ace 编辑器光标位置错误
在vue2-ace-editor的光标处插入字符
nailgo的专栏
09-24 1056
需要实现：点击按钮，在vue2-ace-editor的光标处插入相应字符串 因为vue2-ace-editor本身没什么文档，所以一开始用了editor里面的selection.anchor和lead属性定位光标，document获取内容，然后把字符串和光标前后的文字加起来做成editor的content，太费劲了。 后来想想，既然vue2-ace-editor是封装了ace-editor，那应该可以直接使用ace-editor的api，然后去了ace-editor的官网，不知道什么原因，官网点击菜单都
vue2-editor简单使用及插入图片光标位置问题
IT_iosers的博客
05-09 992
第一步 安装 npm install vue2-editor yarn add vue2-editor 页面引入 // Basic Use - Covers most scenarios import { VueEditor } from "vue2-editor"; // Advanced Use - Hook into Quill's API for Custom Functionality import { VueEditor, Quill } from "vue2-editor"; 插入图片
vue2-ace-editor 自定义提示
qq_36571506的博客
11-21 6461
  template部分： &lt;editor @init="editorInit" @input="changeData" @setCompletions="setCompletions" :autoComplete=true :value='dataView' ...
富文本编辑器vue2-editor实现全屏功能
10-16
主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue之vue2-ace-editor的v-model绑定，切换不同数据渲染页面数据不刷新
文大帅的博客
05-15 1719
问题场景 使用vue单一页面，通过tab切换不同的数据渲染vue2-ace-editor的时候，页面数据不能及时更新 问题排查 可能为是用v-model双向绑定数据的时候，如果数据为list，dict的情况下更新里面的数据，vue是监控不到数据变化，导致数据不刷新，尝试使用set解决，但是问题并未得到解决 this.$set(this.jsonData,"{}", 24) 使用强制刷新this.$forceUpdate()，也是无效 解决方案 使用:key的方式解决问题 一开始我先和v-m
Monaco-editor使用指南，遇到问题详解
Brilliant Me 的博客
02-15 3610
monaco-edtor使用详解，以及我自己开发的时候遇到的问题
monaco-editor 动态插入文本到光标处
Anchor
10-09 2696
monaco editor 动态插入文本到光标处，动态设置光标位置等
WEB端代码文本编辑器ACE的使用指南（附代码）
刘富国的博客
05-17 4505
快速导航一、ACE的介绍二、快速开始1. package.json引入ace-builds2. vue页面引入相应script3. 初始化ace编辑器4.展示效果三、进阶使用 一、ACE的介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中 ace官网 github地址(ace: 项目源码) github地址(aceBuild: 构建后的代码，方便引入)
Monaco Editor 编辑器点击换行位置光标不会跟随问题解决方法
qq_17209641的博客
10-15 2111
在 showdow内使用Monaco编辑器时存在鼠标点击换行位置光标不会跟随问题。 解决方法： function shadowCaretRangeFromPoint(shadowRoot, x, y) { const range = document.createRange(); // Get the element under the point let el = shadowRoot.elementFromPoint(x, y);
Ant Design Modal 中嵌入Form表单后，initValue，不能动态获取最新值得问题
Meditate_MasterYi的博客
01-06 9968
场景描述： 如下图所示，当我点击某个盒子的时候，我需要得到该盒子的数据， 问题：当我第一次点击的时候得到了当前的数据值，但是在点击其他的盒子的时候数据form中的数据还是上次的数据，并未更新。刷新页面后 出现当前盒子的数据信息，然后再次失效 Modal {...modalOpts} maskClosable={false}> Form layout="horizontal"
react 纯函数组件中使用ref属性方法
Meditate_MasterYi的博客
01-17 9000
1.您不能ref在功能组件上使用该属性，因为它们没有实例： 如下 function MyFunctionalComponent() { return ; } class Parent extends React.Component { render() { // This will *not* work! return ( <MyFunctionalCo
videojs-contrib-hls 报错问题
Meditate_MasterYi的博客
10-31 7364
使用videojs 尝试播放m3u8格式文件时，官网推荐使用videojs-contrib-hls 但是发现正确引入 hls插件后仍然报错， media source XXX notfound 解决方式： 将videojs 从package.json 中删除 重新安装 npm install 即可 问题解释： videojs-contrib-hls 的node包中本身带有vide...
vue2-ace-editor
最新发布
07-27
Vue2-Ace-Editor 是一个将 Ace 编辑器集成到 Vue.js 2.x 的组件库。Ace 编辑器是一个基于 Web 技术的代码编辑器，支持多种语言和主题，并提供许多强大的功能和扩展性。 使用 Vue2-Ace-Editor，你可以在 Vue.js 应用中轻松地添加一个代码编辑器，以便用户可以编辑、查看和修改代码。下面是一个简单的示例： 首先，安装 `vue2-ace-editor`： ```bash npm install vue2-ace-editor ``` 然后，在你的 Vue 组件中引入和使用 Ace 编辑器： ```html <template> <div> <ace-editor v-model="code" :options="editorOptions" ></ace-editor> </div> </template> <script> import AceEditor from 'vue2-ace-editor'; export default { components: { 'ace-editor': AceEditor, }, data() { return { code: '', editorOptions: { // 在这里可以配置 Ace 编辑器的选项 // 例如：theme, mode, readOnly 等等 }, }; }, }; </script> ``` 以上示例中，使用了 `v-model` 来实现双向绑定，将编辑器中的代码保存在 `code` 变量中。你可以根据需要配置 `editorOptions` 对象来自定义编辑器的行为。 请注意，此示例仅为基本配置示例，你可以根据自己的需求进一步修改和定制。你可以在 Vue2-Ace-Editor 的文档中找到关于更多配置选项和用法的详细信息。 希望这可以帮助到你！如果有任何问题，请随时向我询问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值