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

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

⭐前言

大家好,我是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的运行命令

💖通过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

⭐效果

预览地址:https://yongma16.xyz/react-mjml/

编辑器的效果如下

包括三个基础功能

  1. 代码高亮
  2. 代码内容格式化
  3. 内容预览

    动态图

⭐总结

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等。

⭐结束

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



目录
相关文章
|
3月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
134 12
|
7月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
133 0
|
5月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
4月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
5月前
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
198 1
|
5月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
153 0
react字符串转为dom标签,类似于Vue中的v-html
|
6月前
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
1135 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
6月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
6月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
65 1
|
5月前
一款非常棒的十六进制编辑器 —— 010 Editor
一款非常棒的十六进制编辑器 —— 010 Editor

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程