如何设置摩纳哥编辑器内联字体大小？

Posted 2023-02-21

【中文标题】如何设置摩纳哥编辑器内联字体大小？

【英文标题】：How to set Monaco editor inline font size?

【发布时间】：2022-01-22 05:27:21

【问题描述】：

我想要这样的效果：

所以我使用editor.deltaDecorations() 来编辑内联css 类。 这是我的代码

var content = [
    'xxx line 1 xxx',
    'xxx title xxx',
    'xxx line 3 xxx'
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), 
    value: content,
    language: 'plaintext'
);

var decorations = editor.deltaDecorations(
    [],
    [
        
            range: new monaco.Range(2, 4, 2, 10),
            options: 
                inlineClassName: 'myclass'
            
        
    ]
);

css

.myclass 
    color: red;
    font-size: 50px;

结果是

摩纳哥编辑器改变了字体大小，但没有重新计算行高，如何解决这个问题？帮助！

【参考方案1】：

Monaco 编辑器是一个代码编辑器，这意味着一些条件。其中一些是：

整个编辑器使用相同的字体。 编辑器不考虑行计算的 CSS 样式。 等宽字体效果最好。 其主要目的是显示程序代码，必须易于阅读。因此，不同的字体或字体样式会让人分心。

Monaco Editor 不是富文本编辑器。如果需要，请使用其他控件。

【讨论】：

谢谢你的回答。有好的开源富文本编辑器推荐吗？ @迈克

SO 不接受软件推荐。而是使用您最喜欢的搜索引擎来检查存在的选项。