?前言
大家好，我是yma16，本文分享關(guān)于 react-app框架——使用monaco editor實(shí)現(xiàn)online編輯html代碼編輯器。
monaco editor 編輯器
Monaco Editor是一款功能強(qiáng)大的Web編輯器，由微軟開發(fā)并使用在多個(gè)項(xiàng)目中。它是基于VS Code編輯器的核心組件，具有類似的功能和用戶體驗(yàn)。
Monaco Editor具有以下特點(diǎn)：
- 輕量級(jí)：Monaco Editor具有出色的性能，可以快速加載和渲染大型文件。
- 可定制性：用戶可以通過(guò)添加自定義插件和主題來(lái)擴(kuò)展和個(gè)性化編輯器。
- 強(qiáng)大的語(yǔ)法高亮：Monaco Editor支持多種編程語(yǔ)言，并提供了高亮顯示和代碼片段等功能。
- 智能代碼補(bǔ)全：Monaco Editor具有智能的代碼補(bǔ)全功能，可以根據(jù)上下文和類型推斷提供準(zhǔn)確的建議。
- 快速導(dǎo)航：用戶可以使用快速導(dǎo)航功能跳轉(zhuǎn)到特定的函數(shù)、變量或文件。
- 代碼調(diào)試：Monaco Editor內(nèi)置了代碼調(diào)試功能，可以在編輯器中進(jìn)行斷點(diǎn)設(shè)置和調(diào)試代碼。
- 多語(yǔ)言支持：Monaco Editor支持多種語(yǔ)言和框架，包括JavaScript、TypeScript、HTML、CSS等。
總的來(lái)說(shuō)，Monaco Editor是一款功能豐富、高性能的Web編輯器，適用于開發(fā)人員、寫作人員和其他需要進(jìn)行文本編輯的用戶。
??react系列文章
next.js博客搭建_初始化next項(xiàng)目（第一步）
next.js博客搭建_登錄注冊(cè)（第二步）
next.js博客搭建_react-markdown渲染內(nèi)容（第三步）
react-grapesjs——開源代碼學(xué)習(xí)與修改（初出茅廬）
react搭建在線編輯html的站點(diǎn)——引入grapes實(shí)現(xiàn)在線拖拉拽編輯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運(yùn)行命令
Replace react-scripts by react-app-rewired
替換script的運(yùn)行命令
??通過(guò)config-overrides.js添加monaco插件配置
在前端根目錄中新建config-overrides.js添加插件的語(yǔ)言配置
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頁(yè)面配置
html代碼編輯配置頁(yè)面
// @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)
??擴(kuò)展 可自定義配置語(yǔ)言
可以通過(guò)monaco配置語(yǔ)言
import { monaco } from 'react-monaco-editor';
monaco.languages.register({id:'語(yǔ)言'})
// @ts-ignore
monaco.languages.setMonarchTokensProvider('語(yǔ)言',配置項(xiàng));
語(yǔ)言的配置項(xiàng)可以參考官方文檔
https://microsoft.github.io/monaco-editor/monarch.html
?效果
預(yù)覽地址：https://yongma16.xyz/react-mjml/
編輯器的效果如下
包括三個(gè)基礎(chǔ)功能
- 代碼高亮
- 代碼內(nèi)容格式化
- 內(nèi)容預(yù)覽
動(dòng)態(tài)圖
?總結(jié)
monaco-editor
monaco-editor使用簡(jiǎn)單，拿來(lái)就能用，對(duì)于新手十分友好。
config-overrides
config-overrides文件是用于定制create-react-app腳手架配置的JavaScript模塊。通過(guò)這個(gè)文件，可以對(duì)Webpack配置進(jìn)行修改和擴(kuò)展，實(shí)現(xiàn)自定義的配置。
在config-overrides.js文件中，你可以使用react-app-rewired庫(kù)提供的API對(duì)create-react-app的原始配置進(jìn)行修改。例如，你可以通過(guò)修改webpack配置，添加自定義的loader、plugin、alias等。
?結(jié)束
本文分享到這結(jié)束，如有錯(cuò)誤或者不足之處歡迎指出！
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-808926.html
?? 點(diǎn)贊，是我創(chuàng)作的動(dòng)力！
?? 收藏，是我努力的方向！
?? 評(píng)論，是我進(jìn)步的財(cái)富！
?? 最后，感謝你的閱讀！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-808926.html
到了這里，關(guān)于react-app框架——使用monaco editor實(shí)現(xiàn)online編輯html代碼編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
