react-app框架——使用monaco editor实现online编辑html代码编辑器

这篇具有很好参考价值的文章主要介绍了react-app框架——使用monaco editor实现online编辑html代码编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化

⭐前言

大家好,我是yma16,本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。
monaco editor 编辑器
Monaco Editor是一款功能强大的Web编辑器,由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件,具有类似的功能和用户体验。

Monaco Editor具有以下特点:

  1. 轻量级:Monaco Editor具有出色的性能,可以快速加载和渲染大型文件。
  2. 可定制性:用户可以通过添加自定义插件和主题来扩展和个性化编辑器。
  3. 强大的语法高亮:Monaco Editor支持多种编程语言,并提供了高亮显示和代码片段等功能。
  4. 智能代码补全:Monaco Editor具有智能的代码补全功能,可以根据上下文和类型推断提供准确的建议。
  5. 快速导航:用户可以使用快速导航功能跳转到特定的函数、变量或文件。
  6. 代码调试:Monaco Editor内置了代码调试功能,可以在编辑器中进行断点设置和调试代码。
  7. 多语言支持:Monaco Editor支持多种语言和框架,包括JavaScript、TypeScript、HTML、CSS等。

总的来说,Monaco Editor是一款功能丰富、高性能的Web编辑器,适用于开发人员、写作人员和其他需要进行文本编辑的用户。

💖react系列文章

next.js博客搭建_初始化next项目(第一步)
next.js博客搭建_登录注册(第二步)
next.js博客搭建_react-markdown渲染内容(第三步)

react-grapesjs——开源代码学习与修改(初出茅庐)
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏

⭐配置monaco-editor

💖引入react-monaco-editor

安装依赖

yarn add react-monaco-editor

💖引入react-app-rewired

安装依赖

yarn add react-app-rewired

替换package.json的script运行命令

Replace react-scripts by react-app-rewired

替换script的运行命令
react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化

💖通过config-overrides.js添加monaco插件配置

在前端根目录中新建config-overrides.js添加插件的语言配置
config-overrides.js

//@ts-ignore
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

//@ts-ignore
module.exports = function override(config, env) {
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ['html']
    }));
    return config;
}

⭐编辑代码的react页面配置

html代码编辑配置页面


// @ts-ignore
import { useEffect,useState, forwardRef, useImperativeHandle,useRef} from "react";
import {htmlLangConfig} from './const'
import {htmlString} from './html'

import MonacoEditor,{ monaco }  from 'react-monaco-editor';


function MonacoHtmlEditor(props:any,ref:any){
    const [content,setContent]=useState(htmlString)

    const iframeRef=useRef<HTMLElement|any>(null)
    const options={
        disableLayerHinting: true
    }

    const renderIframe=(htmlContent:string)=>{
        if(iframeRef?.current?.contentDocument?.body){
            //@ts-ignore
            iframeRef.current.contentDocument.body.innerHTML=htmlContent
        }

    }

    const onChange=(value:string)=>{
        setContent(value)
        renderIframe(value)
    }

    const onEditorDidMount=(editor: any, monaco: any) => {
        // 格式化
        editor.getAction('editor.action.formatDocument').run()
        console.log('format')
    }

    useEffect(()=>{
        if(iframeRef&&iframeRef.current){
            console.log('iframeRef.current',iframeRef.current)
            console.log('iframeRef.current.contentWindow',iframeRef.current.contentWindow)
            renderIframe(htmlString)
        }

    },[])


    useImperativeHandle(ref, () => ({
        getHtml:()=>content
    }))

    // @ts-ignore
    return <>
        <div style={{display:'flex'}} id='monaco_html_id'>
            <div style={{flex:1,textAlign:"left"}}>
                <MonacoEditor
                    width="100%"
                    height="600"
                    language="html"
                    value={content}
                    onChange={onChange}
                    options={options}
                    editorDidMount={onEditorDidMount}
                />
            </div>
            <div style={{flex:1}}>
                <iframe ref={iframeRef} style={{
                    width:'100%',
                    height:'600px'
                }}/>
            </div>
        </div>
        </>
}

export default forwardRef(MonacoHtmlEditor)

💖扩展 可自定义配置语言

可以通过monaco配置语言

import { monaco }  from 'react-monaco-editor';
monaco.languages.register({id:'语言'})
// @ts-ignore
monaco.languages.setMonarchTokensProvider('语言',配置项);

语言的配置项可以参考官方文档
https://microsoft.github.io/monaco-editor/monarch.html
react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化

⭐效果

预览地址:https://yongma16.xyz/react-mjml/
编辑器的效果如下
包括三个基础功能

  1. 代码高亮
  2. 代码内容格式化
  3. 内容预览
    react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化
    动态图
    react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化

⭐总结

monaco-editor
monaco-editor使用简单,拿来就能用,对于新手十分友好。

config-overrides
config-overrides文件是用于定制create-react-app脚手架配置的JavaScript模块。通过这个文件,可以对Webpack配置进行修改和扩展,实现自定义的配置。
在config-overrides.js文件中,你可以使用react-app-rewired库提供的API对create-react-app的原始配置进行修改。例如,你可以通过修改webpack配置,添加自定义的loader、plugin、alias等。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!

react-app框架——使用monaco editor实现online编辑html代码编辑器,web站点,react.js,microsoft,javascript,html,vscode,可视化

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!文章来源地址https://www.toymoban.com/news/detail-808926.html

到了这里,关于react-app框架——使用monaco editor实现online编辑html代码编辑器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 使用 monaco-editor 自定义代码补全。

    使用场景:         数据编辑时需要支持sql语法高亮, 并且支持自定义代码提示补全。 monaco详细说明和使用可参考另一篇发文Monaco Editor (vite/webpack + ts + vue项目使用) 步骤一:安装依赖  步骤二:组件功能封装 OPTIONS_BASE :  为基础配置,具体参数可参考官网 worker: 解决vite引

    2024年02月06日
    浏览(47)
  • 使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因

    首先使用npm或者其他包管理工具安装依赖插件: 如果右键菜单汉化一部分失败,首先去项目下看node_modules/monaco-editor-nls/locale/zh-hans中搜vs/editor/contrib/format/看一下是否有路径有brower字段,再去对应的node_modules/monaco-editor/esm/vs/editor/contrib/format/formatActions看是否有brower文件夹 如果

    2024年02月15日
    浏览(40)
  • monaco,monaco-editor,monaco-editor-webpack-plugin,

    \\\"Monaco\\\"是包含了Monaco Editor和Monaco Language Server两个项目的总称,而\\\"Monaco Editor\\\"是Monaco项目中的一个部分,它是一款基于Web技术的高性能代码编辑器。 Monaco Language Server是一个支持多种语言的语言服务器,可以提供语法分析、代码补全、错误检查、重构等功能。Monaco Editor可以与

    2024年02月14日
    浏览(42)
  • Monaco Editor安装,vue3中使用,自定义高亮,自定义提示,附完整代码

    root中为高亮规则。[/curl/, {token: “string.escape”}]:表示 ‘curl’ 的高亮颜色为粉色 高亮颜色参考:https://microsoft.github.io/monaco-editor/monarch.html 效果: 效果: 1、父组件:HomeView.vue 父组件中传给子组件所需的组件高度、初始内容、高亮类型、是否只读 子组件通过editorChange方法给

    2024年02月16日
    浏览(50)
  • Vue集成Monaco Editor的使用,以及开发Python代码编辑器和Sql等

    ​微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,

    2024年02月11日
    浏览(55)
  • Online LaTeX Editor——Overleaf使用(全网最详细过程)

    目录 1 注册Overleaf 2 新建项目 3 导入LaTeX压缩包  3.1 下载LaTeX源代码 3.2 导入压缩包 4 编译生成 5 项目导出 最近由于课程及学业的需要学习了LaTeX的一些使用方法,以及推荐一款在线编辑LaTeX的工具:Overleaf。下面将详细介绍使用方法,以及一些注意事项。 直接点击下面链接即

    2024年02月07日
    浏览(50)
  • 代码编辑器之monaco editor

    (一)简介 底层vscode开发的一款编辑器,各方面的样式功能基本与vscode一致。 (二)官方文档 Monaco Editor (microsoft.github.io) (三)安装 安装时两者版本要对应,对应表在后面 (四)属性 以下是较为常见的属性 (五) 方法 挑选出使用频次较高的 monaco.editor.setTheme(‘主题色名字

    2024年02月21日
    浏览(42)
  • Monaco Editor教程(二二):monaco编辑器完整配置翻译及重点配置解析

    本篇文章讲解一下创建Monaco编辑器时所有完整配置,算是一个比较浅显的入门文章。 但由于一个Monaco的配置项多达150个,整篇文章耗费了我5天的下班时间,请读者自行点赞收藏。这里结合实际的项目业务场景介绍一些常用的,有可能修改的默认配置参数。Monaco已经默认了很

    2023年04月25日
    浏览(50)
  • Monaco Editor编辑器教程(二八):Monaco 与 VS Code 两个项目的联系与异同点

    很多人知道前端代码编辑Monaco Editor 与VS Code 有关系,但却不清楚其中的细节,本篇文章就带大家了解一下两者的关系和异同点。 首先,这两个项目都是来自微软,其中VS Code 项目Github 144K star,是基于CS架构,客户端-服务端架构。主要的技术栈是 elector,ts。 而Monaco Editor则是

    2023年04月27日
    浏览(39)
  • Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频

    哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章。 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸。自结束了GitLab CI/CD的专栏后,我就一直在利用业余时间学习Monaco相关的知识,一是为了弥补

    2023年04月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包