有什么网站是可以做动态图的,网站功能描述与分析,做网站优化给业务员提成,设计有什么网站推荐文章目录 ⭐前言#x1f496;react系列文章 ⭐配置monaco-editor#x1f496;引入react-monaco-editor#x1f496;引入react-app-rewired#x1f496;通过config-overrides.js添加monaco插件配置 ⭐编辑代码的react页面配置#x1f496;扩展 可自定义配置语言 ⭐效果⭐总… 文章目录 ⭐前言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具有以下特点
轻量级Monaco Editor具有出色的性能可以快速加载和渲染大型文件。可定制性用户可以通过添加自定义插件和主题来扩展和个性化编辑器。强大的语法高亮Monaco Editor支持多种编程语言并提供了高亮显示和代码片段等功能。智能代码补全Monaco Editor具有智能的代码补全功能可以根据上下文和类型推断提供准确的建议。快速导航用户可以使用快速导航功能跳转到特定的函数、变量或文件。代码调试Monaco Editor内置了代码调试功能可以在编辑器中进行断点设置和调试代码。多语言支持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 ./htmlimport MonacoEditor,{ monaco } from react-monaco-editor;function MonacoHtmlEditor(props:any,ref:any){const [content,setContent]useState(htmlString)const iframeRefuseRefHTMLElement|any(null)const options{disableLayerHinting: true}const renderIframe(htmlContent:string){if(iframeRef?.current?.contentDocument?.body){//ts-ignoreiframeRef.current.contentDocument.body.innerHTMLhtmlContent}}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(iframeRefiframeRef.current){console.log(iframeRef.current,iframeRef.current)console.log(iframeRef.current.contentWindow,iframeRef.current.contentWindow)renderIframe(htmlString)}},[])useImperativeHandle(ref, () ({getHtml:()content}))// ts-ignorereturn div style{{display:flex}} idmonaco_html_iddiv style{{flex:1,textAlign:left}}MonacoEditorwidth100%height600languagehtmlvalue{content}onChange{onChange}options{options}editorDidMount{onEditorDidMount}//divdiv 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/ 编辑器的效果如下 包括三个基础功能
代码高亮代码内容格式化内容预览 动态图
⭐总结
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等。
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 最后感谢你的阅读
