Monaco Editor --Web编辑器自定义主题、代码提示等

最新推荐文章于 2024-07-12 20:49:16 发布

风干牛肉巴旦木

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量4.2k

点赞数

分类专栏： js 文章标签： js html

本文链接：https://blog.csdn.net/weixin_42160499/article/details/109814702

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官网： Monaco Editor

JS配置信息：

//相关的包配置需要下载到对应目录
require.config({ paths: { 'vs': './vs' }});
    require(['vs/editor/editor.main'], function() {
        monaco.editor.defineTheme('BlackTheme', {
            base: 'vs-dark',
            inherit: true,
            rules: [{ background: '#3e414a' }],
            colors: {
                // 相关颜色属性配置
                // 'editor.foreground': '#000000',
                'editor.background': '#3e414a',     //背景色
                // 'editorCursor.foreground': '#8B0000',
                // 'editor.lineHighlightBackground': '#0000FF20',
                // 'editorLineNumber.foreground': '#008800',
                // 'editor.selectionBackground': '#88000030',
                // 'editor.inactiveSelectionBackground': '#88000015'
            }
        });
        //设置自定义主题
        monaco.editor.setTheme('BlackTheme');
        
        //创建编辑器
        editor = monaco.editor.create(document.getElementById('container'), {
            value: '',
            language: 'python',
            theme:'BlackTheme',
            automaticLayout: true,
            fontSize : '20px',
        });
        
        // 创建代码提醒
        monaco.languages.registerCompletionItemProvider('python', {
            provideCompletionItems: function(model, position) {
            // find out if we are completing a property in the 'dependencies' object.
                var textUntilPosition = model.getValueInRange({
                    startLineNumber: 1, 
                    startColumn: 1, 
                    endLineNumber: position.lineNumber, 
                    endColumn: position.column
                    });
                var suggestions = [];
                var word = model.getWordUntilPosition(position);
                var range = {
                    startLineNumber: position.lineNumber,
                    endLineNumber: position.lineNumber,
                    startColumn: word.startColumn,
                    endColumn: word.endColumn
                };

                if(textUntilPosition.charAt(textUntilPosition.length-2)=='.'){
                    suggestions = createTips();
                }
                return {suggestions: suggestions};
            }
        });
    });

    // 代码提示方法(返回一个数组)
    function createTips() {
        return [
		{
			label: 'SetValue', //显示的提示名称
			insertText: 'SetValue("text")' //选择后粘贴到编辑器中的文字
		},
        ]
    }

HTML前端代码

<body overflow:hidden style="padding:0;margin:0">
    <div id="container" style="width:100%;height:100vh;border:0px"></div>
</body>

风干牛肉巴旦木

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
3
评论
Monaco Editor --Web编辑器自定义主题、代码提示等

官网： Monaco EditorJS配置信息：//相关的包配置需要下载到对应目录require.config({ paths: { 'vs': './vs' }}); require(['vs/editor/editor.main'], function() { monaco.editor.defineTheme('BlackTheme', { base: 'vs-dark', inherit: true,
复制链接

扫一扫