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

Question

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

Answer 1

影根

使用 shadow root，您可以从 root 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

从element.cm

获取CodeMirror对象

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

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

How to integrate code editor in Material UI?

codemirror

ace-editor

reactjs

material-ui

影根

HTML

JS