时间戳

首页 > 解决方案 > 如何在 Material UI 中集成代码编辑器？

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

问题描述

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

标签： reactjsmaterial-uicodemirrorace-editor

解决方案

影根

使用影子根，您可以从根 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;");

推荐阅读