monaco-editor布局篇(二)-自动换行

已于 2024-02-05 19:11:05 修改
阅读量958 收藏 6
点赞数 5
分类专栏： monaco-editor 文章标签： vue 编辑器 monaco-editor
于 2024-02-05 19:10:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012436704/article/details/136046643
版权

monaco-editor的换行方式，主要分为3种情况：

  • 不换行
  • 按照编辑器宽度换行
  • 按照制定列数换行

主要受wordwrap和wordwrapcolumn控制，具体如下：

取值含义
off不换行，会一直滚动
on换行，文本将在视区宽度内自动换行
wordWrapColumn当设置为 “wordWrapColumn” 时，文本将在指定的列数处自动换行
bounded文本将在视区宽度和指定列数的较小值处自动换行。

但是需要注意的是，当设置为on的时候，每一行换行的字符数并不是确定的,只是保证字符能够填满

例如下面：
字母填充84个，虽然没有铺满，依然换行了，而数字填充了84个；

在这里插入图片描述

更多示例请参考中文文档：monaco-editor 中文文档

暗影刀客
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-monaco-editor格式化
qq_37233023的博客
01-04 6513
react-monaco-editor引入 import Monaca from 'react-monaco-editor'; 2、配置 const editorDidMountHandle = (editor: any, monaco: any) => { editor.getAction('editor.action.formatDocument').run() //格式化 } <Monaca height={monacaHeight} .
Vue3，使用monaco-editor实现sql语法高亮，自动/手动格式化
weixin_47239456的博客
04-07 1984
vue3中使用monaco-editor编辑器
Monaco Editor 编辑器点击换行位置光标不会跟随问题解决方法
qq_17209641的博客
10-15 2163
在 showdow内使用Monaco编辑器时存在鼠标点击换行位置光标不会跟随问题。 解决方法： function shadowCaretRangeFromPoint(shadowRoot, x, y) { const range = document.createRange(); // Get the element under the point let el = shadowRoot.elementFromPoint(x, y);
解决使用monaco-editor编译器，编译器展示内容没有超过编译器高度，但是出现滚动条问题
gurenchang的博客
07-03 223
解决使用monaco-editor编译器，编译器展示内容没有超过编译器高度，但是出现滚动条问题
Monaco-editor 常用配置项
weixin_43951388的博客
08-18 6513
Monaco编辑器
vue 使用 monaco-editor 实现在线编辑器
lf811的博客
11-01 1329
monaco-editor 实现在线编辑器
【JavaScript源代码】JS代码编译器Monaco使用方法.docx
12-30
JS代码编译器Monaco使用方法 　　前言　　我的需求是可以语法高亮、函数提示功能、自动换行、代码折叠　　Monaco　　Monaco是微软家的，支持的语言很多，还有缩略地图，有时候提示不好用然后包体很大。 The Monaco Editor is the code editor that powers VS Code.　　使用方法官网　　[官方文档](https://microsoft.github.io/monaco-editor/index.html) [在线demo](https://github.com/Microsoft/monaco-editor-samples) [githu
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
react-monaco-editor：摩纳哥的React编辑器
02-05
yarn add react-monaco-editor 与Webpack一起使用 import React from 'react' ; import { render } from 'react-dom' ; import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
rollup-plugin-monaco-editor:用于导入摩纳哥编辑器的汇总插件
08-04
目前，这个插件支持monaco-editor@0.21.* ~ 0.26.* 。 以下版本已在本地测试： 0.21.2 0.22.3 0.24.0 0.25.0 0.26.1 用法 此插件应与其他插件一起使用。 包含 @rollup/plugin-node-resolve rollup-plugin-...
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
《React-Monaco-Editor：基于Monaco的React富文本编辑器详解》 React-Monaco-Editor是一款基于Microsoft的Monaco Editor构建的React组件，它允许开发者在React应用中集成一个功能强大的代码编辑器，尤其适用于Web...
react-monaco-editor:摩纳哥React的编辑器，它是react-monaco-editor和@ monaco-editorreact的组合
05-10
npm i @rimoe/react-monaco-editoryarn add @rimoe/react-monaco-editor与react-monaco-editor相比，您不需要配置webpack，因为我们使用的是与@ monaco-editor / react相同的可取消加载程序。 关于Monaco Editor的...
monaco-editor布局篇(一)-自适应大小
暗影刀客的博客
02-05 1355
这个属性设置设置为 true ，则编辑器会在窗口大小发生变化时自动调整大小以适应新的窗口大小。所以需要注意的是，如果有类似于侧边栏菜单关闭和展开的逻辑，一定要保证编辑器的父容器盒子能够自使用宽度变化，否则无法触发编辑器的自适应。在create编辑时，通过配置。编辑器的宽高怎么进行自适应？
Monaco Editor教程（十四）：monaco中的位置区间Range类型的详细解释
知无涯
11-07 3649
在了解了monaco中有关位置Position的定义后，大家都是知道每一个Position都指向monaco中的一个行列，这对于定位是很基础的功能，如果我们要一个编辑器中单词的位置，Position就不太好描述了,因为每个单词都会有一个起始Position与一个结束Position。那么这个时候我们就可以使用Range来描述一个编辑器中一段位置。在Range中开始行列必须小于等于结束行列。Range相关的一共有二个定义，一个是单纯描述Range属性的接口IRange和类Range。
monaco editor各种功能实现总结
热门推荐
gao_grace的博客
03-29 7万+
添加删除断点
monaco-editor实现C#自定义语法的智能提示
miniApps的博客
10-31 3915
Monaco Editor 实现自定义C#方法的智能提示 下载安装： npm install monaco-editor index.html内主体文件引入 MonacoEditor加载器文件：<script src="./node_modules/monaco-editor/dev/vs/loader.js"></script> 配置编辑器文件：<scri...
MonacoEditor编辑器自动格式代码
Sensation_cyq的博客
08-02 3064
MonacoEditor编辑器自动格式代码
Monaco Editor 自定义语言的实现
weixin_34274029的博客
12-10 6940
废话不多说The Monaco Editor is the code editor that powers VS Code.It is licensed under the MIT License and supports IE 9/10/11, Edge, Chrome, Firefox, Safari and Opera.安装npm install monaco-editor复制代码引用本人写...
Typora 【最新1.8.6】版本安装下载教程 (轻量级 Markdown 编辑器)，图文步骤详解，免费领取（软件可激活使用）
最新发布
m0_59470317的博客
07-21 1088
Typora 是一款专为 Markdown 爱好者设计的文本编辑器，它结合了简洁的界面设计与强大的 Markdown 渲染能力，为用户提供了一个流畅、高效的写作环境。核心特点即时渲染：Typora 最大的亮点之一是其即时渲染功能。与传统的 Markdown 编辑器相比，Typora 不需要用户手动切换预览模式和编辑模式。用户在输入 Markdown 语法时，编辑器会即时显示渲染后的效果，使得写作和预览过程无缝衔接。无缝体验：Typora 致力于为用户提供无缝的写作体验。
monaco-editor 三二
11-12
monaco-editor是一个非常强大和流行的代码编辑器，它是由微软开发的。它是一个基于web的应用程序，可以用于在浏览器中编辑和查看各种编程语言的源代码。monaco-editor拥有许多非常有用的特性，如语法高亮、自动补全、代码折叠、错误提示等，这些特性使得代码编辑更加高效和方便。 monaco-editor使用TypeScript编写，因此它非常易于扩展和自定义。可以通过编写插件来添加其他功能或针对特定编程语言的支持。monaco-editor还提供了丰富的API来操作和控制编辑器，可以对编辑器进行各种操作，如获取和设置代码内容、获取代码光标位置、保存和加载代码等等。 另外，monaco-editor还支持多种主题风格，如明亮和暗黑主题，可根据用户个人喜好进行自定义。它还支持多重布局，可以在同一个页面中同时显示多个编辑器实例。 monaco-editor还具有高度可定制性，可以根据实际需要进行自定义设置，如字体样式、缩进设置、代码折叠范围等。它还支持多种快捷键和鼠标操作，使得代码编辑更加便捷和高效。 总之，monaco-editor是一个功能强大、易用且高度可定制的代码编辑器，它在web开发中非常受欢迎，并被广泛应用于各种项目中。无论是简单的代码编辑还是复杂的开发任务，monaco-editor都能帮助开发者提高效率并更好地完成工作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值