San-monaco-editor NPM

san-monaco-editor

san-monaco-editor是基于vscode的核心代码编辑器monaco-editor封装的san组件

安装

npm安装

$ npm install san-monaco-editor

CDN

我们建议使用 CDN 引入的用户在链接地址上锁定版本，以免将来 san-monaco-editor 升级时受到非兼容性更新的影响。锁定版本的方法请查看changelog或者agile平台最新版本（目前）。

<script src="https://bce.bdstatic.com/lib/san-monaco-editor/${version}/monaco"></script>
<!-- 例如 -->
<script src="https://bce.bdstatic.com/lib/san-monaco-editor/1.0.0.4/monaco"></script>

使用方式

import { Component } from "san";
import { MonacoEditor, MonacoDiffEditor } from "monaco";

const template = `
    <template>
        <s-monaco
            value="{{value}}"
            theme="{{theme}}"
            language="{{language1}}"
            width="{{width}}"
            height="{{height}}"
            options="{{options1}}"
            on-change="onChange"
        />
        <s-diff-monaco
            originalValue="{{original}}"
            modifiedValue="{{modified}}"
            theme="{{theme}}"
            language="{{'text/plain'}}"
            width="{{width}}"
            height="{{height}}"
            options="{{options2}}"
            on-change="onChange"
        />
    </template>
`;

export default class Demo extends Component {
    static template = template;

    static components = {
        "s-monaco": MonacoEditor,
        "s-diff-monaco": MonacoDiffEditor
    };

    initData() {
        return {
            value: 'test'
            original: "This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text",
            modified: "just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.",

            language: 'javascript',

            theme: 'vs',

            width: 800,
            height: 500,
            options1: {
                lineNumbersMinChars: 3,
                lineDecorationsWidth: 1,
            },
            options2: {
                scrollBeyondLastLine: false,
                lineNumbersMinChars: 3,
                lineDecorationsWidth: 1,
                minimap: {
                    enabled: false
                }
            }
        };
    }

    onChange(value: string) {
        console.log(value)
    }
}

webpack打包按需引入

monaco-editor-webpack-plugin

下面是webpack配置，具体配置规则参考monaco-editor-webpack-plugin

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['json']
    })
  ]
};

webpack打包css文件冲突

monaco-editor编辑器在内部使用CSS导入，所以如果您在项目中使用CSS模块，那么默认情况下很可能会发生冲突。为了避免这种情况，分别对应用和monaco-editor使用css-loader进行处理：

const path = require('path');
const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
 
{
  test: /\.css$/,
  include: APP_DIR,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      namedExport: true,
    },
  }],
}, {
  test: /\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}