在vue2-ace-editor的光标处插入字符

最新推荐文章于 2024-01-19 14:51:58 发布
最新推荐文章于 2024-01-19 14:51:58 发布
阅读量1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nailgo/article/details/108769109
版权

需要实现：点击按钮，在vue2-ace-editor的光标处插入相应字符串

因为vue2-ace-editor本身没什么文档，所以一开始用了editor里面的selection.anchor和lead属性定位光标，document获取内容，然后把字符串和光标前后的文字加起来做成editor的content，太费劲了。

后来想想，既然vue2-ace-editor是封装了ace-editor，那应该可以直接使用ace-editor的api，然后去了ace-editor的官网，不知道什么原因，官网点击菜单都没反应……（无力吐槽）

还是在下面这个博文里面找到了ace-editor对应的api，就是一个insert()方法，就是这么简单……

https://www.cnblogs.com/chengxu931106/p/7196601.html

nailgo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue光标插入内容_vue-quill-editor中，怎么通过点击按钮在光标出插入文字？
weixin_34226447的博客
01-12 637
<template><div>邮箱管理<quill-editorref="myTextEditor"v-model="content":config="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"><...
富文本编辑器vue2-editor实现全屏功能
10-16
主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue2-editor简单使用及插入图片光标位置问题
IT_iosers的博客
05-09 1027
第一步 安装 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、monaco-editor 光标位置错误问题
Meditate_MasterYi的博客
02-22 2469
巴拉巴拉
Vue 使用Ace 编辑器光标位置错误
weixin_57467236的博客
01-24 645
Vue 使用Ace 编辑器光标位置错误
WEB端代码文本编辑器ACE的使用指南（附代码）
刘富国的博客
05-17 4759
快速导航一、ACE的介绍二、快速开始1. package.json引入ace-builds2. vue页面引入相应script3. 初始化ace编辑器4.展示效果三、进阶使用 一、ACE的介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中 ace官网 github地址(ace: 项目源码) github地址(aceBuild: 构建后的代码，方便引入)
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue-testcase-minder-editor vue2.0思维导图实例
04-28
使用vue-testcase-minder-editor插件+vue2.0实现的思维导图实例
vue-dataflow-editor-Vue2数据流图编辑器-Vue.js开发
05-27
npm npm i @ krthr / vue-dataflow-editor导入app.js上的库// // app.js或main.js，或主文件//在其中创建vue应用程序从“ vue”导入Vue； //其他导入会导入“ @ krthr / vue-dataflow-editor”； 导入“ @ krthr / ...
vue2-editor：使用Vue.js和Quill的文本编辑器
02-06
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 ...
阿里产品大大：react项目这块用aceEditor代码编辑器吧，小姐姐看完都会的教程，你还不会？？？？
JetLinks物联网基础平台
04-23 8021
大家好，我是：じ☆ve朽木，开发经验都是一步一步慢慢积累的，没有谁生来就具有的，只要我们付出了努力，肯定就会有收获！进入我的博客，带你了解Java知识，js小技巧，带你玩转高端物联网。博客地址为：じ☆ve朽木。 react项目中有个需求需要对接一个代码编辑器，查看了ant design官方社区精选组件提供了两款代码编辑器，有一款是微软推出的，但是代码提示不是很友好，最后需求又查看了阿里云的相关...
Ace-editor 输入内容时光标闪动，定位错乱的解决方案
weixin_30652879的博客
01-04 1615
请尝试将字体设置成12PX或者14px（偶数），避免设置成13px。 应该就可以解决。 同时向大家推荐一款可直接生成文档的API调试、管理工具（中文PostMAN）：https://www.apipost.cn/ 转载于:https://www.cnblogs.com/phpwechat/p/10219456.html...
Ace-editor编辑器输入内容时光标自动跳到最开头
weixin_47237450的博客
07-12 2011
是因为数据双向绑定导致的，编辑器接收值后会重新渲染编辑器，会导致光标移动到最开头。 解决办法：每次更新前暂存光标位置，然后重新setValue.. // 记录光标位置 const position = this.aceEditor.getCursorPosition(); // 数据重新赋值 this.aceEditor.getSession().setValue(val); // 清除 this.aceEdi...
ACE编辑器ace-editor笔记
qq_26399287的博客
05-11 7380
<div class="ace-editor" ref="ace"></div> <script> import ace from 'ace-builds' import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入 import 'ace-builds/src-noconflict/theme-chrome' // 默认设置的主题 import 'ace-builds/src-noconflict/mode
ACE Editor 常规使用方法及注意事项
欧巴酱的CSDN
05-21 5119
1.ace editor 在GitHub 下载即可 注意要下载已经编译过的版本（https://github.com/ajaxorg/ace-builds） 2.引入主要的几个文件 ace.js（主文件），ext-language_tools.js（编译代码的文件） <div id="editor"><div> var editor = ace.edit("editor"); editor.$blockScrolling = Infinity; edit.
ACEeditor使用手册（二）
最新发布
球球不吃虾WHR2349博客
01-19 1388
如果ACEeditor的内置语言模式不能满足需求，用户还可以通过定义自己的语言模式来实现语法高亮。这通常涉及到编写一个描述语言语法的TM语言文件，并将其加载到编辑器中。除了内置的补全规则外，ACEeditor还支持自定义补全规则。用户可以通过扩展补全提供器来实现更智能的补全逻辑。// ... 其他补全项});除了预定义的代码片段外，用户还可以自定义代码片段，并在需要时快速插入。");',});
monaco-editor 动态插入文本到光标处
Anchor
10-09 2824
monaco editor 动态插入文本到光标处，动态设置光标位置等
vue中使用vue2-ace-editor
wruli的博客
03-16 1651
/regex 匹配文字 也可以是正则表达式//token 为满足条件的添加class名字});});//css//此处设置你高亮文字的颜色。
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 的文档中找到关于更多配置选项和用法的详细信息。 希望这可以帮助到你！如果有任何问题，请随时向我询问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值