首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实现一个 Code Pen:(二)在 Next.js 中使用 Monaco Editor

Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能,Monaco Editor 支持的语言有很多,所以使用的时候不需要将全部语言都支持,我们只需要按需加载需要支持的语言就可以了.../index.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker': '...import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js' import 'monaco-editor/esm/vs...在 Next.js 中加载 Monaco Editor 由于 next.js 加载全局 css 文件只能在 src/pages/_app 中引入,但 monaco-editor,加载 css 是在包引入的...至此编辑器封装成功,看下使用效果 预览地址:https://code.runjs.cool/pen/create 代码仓库:https://github.com/maqi1520/next-code-pen

2.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

基于 Editor.js 开发富文本编辑器库

开始 Editor.js 提供了简单而直观的用户界面,根据需求可以灵活添加自定义的编辑工具,通过插件扩展功能 Editorjs 使用 js 开发,脱离框架依赖,因此可以基于它封装富文本编辑器,用于 Vue...和 React 项目 editor-js-component 是基于 Editorjs 封装的库,通过 monorepo 管理项目,不局限框架 Demo 示例 editor-js-component...editorjs-js-component 是基于 Editor.js 封装的库,不局限框架,可以用于 Vue 和 React 项目 安装 # NPM npm install --save editor-js-component...# or Yarn yarn add editor-js-component # or Pnpm pnpm add editor-js-component 查看文档,使用 import { useEditorjs...Editorjs 以模块化的方式开发,通过插件方式扩展功能,如标题、段落、列表、表格等 根据 Editorjs 提供的 API 开发富文本插件功能 插件列表,可以开发满足于自己的插件 header list code

63500

Auto.js Pro如何连接VS Code插件

由于Auto.js Pro的插件更新,原插件使用方式已经不适合新插件,现推出此教程。 准备Auto.js Pro 你首先需要一个Auto.js Pro。...下载VS Code 官方下载地址:https://code.visualstudio.com/ 下载后可能不是中文显示的,此时我们需要安装中文语音包。 打开VS Code,点击“扩展”图标。...搜索“chinese”,如图: 点击安装后,等待安装成功,重启VS Code。 安装Auto.js Pro插件 打开VS Code,点击“插件图标”。...搜索autojs或者hyb1996,安装“Auto.js-Pro-Ext”,等待安装成功后重启VS Code。...打开VS Code,按快捷键Ctrl + Shift + P,弹出命令窗口,输入Pro,选择"Auto.js Pro: 连接到新设备" -> "adb连接手机(USB)"。

3.9K20

Node.js 在 VS Code 中发送 POST 请求

Node.js 的后端貌似更容易解析 Node 中 request 模块发送的 POST 请求,本文记录 node.js VS Code 环境配置和发送 POST 请求的方法。...res); }); 需要的是 req.body 在 Python 发送的 request 里压根就没有 body 这东西,发送的数据在 data 属性里,难怪返回 400 于是需要直接用 Node.js...发送 Post 请求 配置环境 安装 Node.js 参考 node.js 安装与 npm 加速 配置 VS_Code 安装 VS Code 安装 Code Runner 在项目文件夹运行 npm...init --yes npm install request --save npm install 之后可以右键运行 js 脚本 也可以在代码中打断点调试 Node.js 发送 Post 请求...人家 Node.js 的 request 模块啊,直接就带 body,所以就被正确解析了 参考代码: var request = require('request'); var url="http:/

3.1K10

Monaco Editor教程(二):前端为什么一定要学习monaco-editor

背景 今天这篇文章我就来唠唠,为什么前端开发者要一定要学习monaco-editor这个项目,之所以要写这篇文章,是想和读者们讨论一下,monaco-editor的在编辑器中的地位,以及学会它能够对前端又那些好处...(PS: 目前Github单文件编辑器是用的CodeMirror) 开发者利器 VS Code(它的地位对研发就不要多说了)的核心编辑器就是monaco-editor, 另外代码管理DevOps平台.../ 另外还有 code-server 之前介绍的 dbt 项目也是使用monaco-editor编辑器。...绝大部分的在线WebIDE项目都是使用的 monaco-editor,像一些数据开发,在线编码,等等。...菜单项 其他在VS Code中存在的功能 为什么学 学这个东西肯定是为了使用,掌握了它,有足够的经验后,你就能胜任一个项目中比较核心的岗位。

4.3K31
领券