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

文章目录

• • ⭐前言
  • • 💖react系列文章
    • ⭐配置monaco-editor
    • • 💖引入react-monaco-editor
      • 💖引入react-app-rewired
      • 💖通过config-overrides.js添加monaco插件配置
      • ⭐编辑代码的react页面配置
      • • 💖扩展 可自定义配置语言
        • ⭐效果
        • ⭐总结
        • ⭐结束

          

          ⭐前言

          大家好，我是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(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 <>
                  
          
                      
          
                          content}
                              onChange={onChange}
                              options={options}
                              editorDidMount={onEditorDidMount}
                          />
                      
                      
          {flex:1}}>