如何在 Material UI 中集成代码编辑器？

【问题标题】：How to integrate code editor in Material UI?如何在 Material UI 中集成代码编辑器？
【发布时间】：2020-10-09 10:01:41
【问题描述】：

我已经尝试了所有可能的 npm 流行代码编辑器，但它们都拒绝显示等宽字体。我尝试了 ThemeProvider 和内联样式，但它不起作用。 它显示幻影等宽字体，实际显示的字体是默认字体。 除了代码编辑器之外，等宽字体还可以在排版组件中使用。除了字体，所有代码编辑器都可以正常工作。请帮忙。

【问题讨论】：

我的朋友对旧的解决方案感到抱歉。我更新了解决方案 connectedCallback() 函数不是必需的。

标签： reactjs material-ui codemirror ace-editor

【解决方案1】：

影根

使用影子根，您可以从根 css 设计中分离出来。有关文档，请参阅https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

window.customElements.define('codemirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({ mode: 'open' });
        // !! Shadow Root inside css rules you can change this
        shadowRoot.innerHTML = `
            <style>
               @import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
            </style>` 
        // !! on ready you can change yourself CodeMirror constructor
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});        
    }
    
});

HTML

使用自定义元素 <codemirror id="test"></codemirror>;

JS

从元素.cm

获取CodeMirror对象

var code = document.getElementById("test");
code.cm.setValue("var i = 0;");

【讨论】：