ray-online-coder

ray-online-coder

快速集成在线代码编辑器，支持自动提示、React 语法、es6 语法等

install

npm i --save ray-online-coder

usage

Component List

• OnlineCoder
• withRuntimeCode
• getBabelParams
• RunAFCoder
• RunA3DCoder

RunAFCoder

import React, { Component } from 'react';
import { RunAFCoder } from 'ray-online-coder';

const generalChilds = [
  { key: 'button', name: 'Button 按钮' },
  { key: 'icon', name: 'icon 内置图标' }
];

const comList = [
  { key: 'style', name: '通用样式' },
  { key: 'general', name: '通用组件', children: generalChilds }
];

const codes = {
  button: `
import { Button } from 'amos-framework';

ReactDOM.render((
  <div>
    <Button>默认</Button>
    <Button type="minor">次要</Button>
    <Button size="lg">大尺寸</Button>
    <Button size="sm">小尺寸</Button>
    <Button circle>踩</Button>
    <Button disabled>不可用</Button>
    <Button icon={<Icon icon="collection" />}>使用 Icon 组件</Button>
  </div>
), _react_runner_);
  `,
  icon: `
import { Icon } from 'amos-framework';

ReactDOM.render((
  <div>
    <Icon icon="align-horizontal" />
    <Icon icon="align-vertical" />
    <Icon icon="alignleft" />
  </div>
), _react_runner_);
`
};

class RunAF extends Component {
  render() {
    return (
      <RunAFCoder fileList={comList} codes={codes} />
    );
  }
}

export default RunAF;

Custom Use

import React, { Component } from 'react';
import OnlineCoder, { withRuntimeCode, getBabelParams } from 'ray-online-coder';
import dependencies from './dependencies';

const codes = {
  basic: `
import A3DDesigner, { Connect, ParabolaCurve } from 'amos-3d/lib/designer';

const { resizeConnect } = Connect;

const curvePoints = [[-165, 20, 1], [-100, 72, -35], [-50, 130, -35]];

const graph = {
  sceneOptions: {
    background: 0x253366
  },
  cameraOptions: {
    fov: 45,
    near: 1,
    far: 5000,
    position: { z: 250 },
    // 是否启用拾取器
    enablePicker: true,
    builtInOrbit: {
      maxPolarAngle: Math.PI * 0.5,
      minDistance: 1,
      maxDistance: 5000
    }
  },
  defaultLoading: false
};

class Stuffs extends Component {
  render() {
    const { dimension } = this.props;
    const pointProps2 = {
      size: 5,
      color: 0xff1c1c
    };
    return (
      <A3DDesigner {...graph} {...dimension} singleModel>
        <ParabolaCurve points={curvePoints} onlyStartEnd circleDot pointProps={pointProps2} />
      </A3DDesigner>
    );
  }
}

const Demo = resizeConnect(Stuffs);

ReactDOM.render(<Demo />, _react_runner_);
  `
};

const comList = [
  { key: 'basic', name: '基本使用' },
  { key: 'model', name: '内置物体' }
];

function registerHints(monaco){
  const hints = [
    {
      label: 'Button', // 显示的提示内容
      kind: monaco.languages.CompletionItemKind.Function, // 用来显示提示内容后的不同的图标
      insertText: 'Button', // 选择后粘贴到编辑器中的文字
      detail: 'Button 按钮' // 提示内容后的说明
    }
  ];

  monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems() {
      return { suggestions: hints };
    },
    triggerCharacters: ['Button'] // 触发提示的字符，可以写多个
  });
}

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-3d 中的 import
  babelParam: getBabelParams(['amos-3d', 'amos-3d/lib/designer']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class My3DRun extends Component {
  render() {
    return (
      <OnlineCoder {...this.props} codes={codes} fileList={comList} registerHints={registerHints} />
    );
  }
}

export default My3DRun;

codes 采用 function 方式

function generateCode(codeKey){
  return fetch(`/mycodes/${codeKey}.txt`).then(res => {
    if (res.status === 200){
      return res.text();
    }
    return '// 未找到案例';
  });
}

function registerHints(monaco){
  // const hints = [
  //   {
  //     label: 'Button', // 显示的提示内容
  //     kind: monaco.languages.CompletionItemKind.Function, // 用来显示提示内容后的不同的图标
  //     insertText: 'Button', // 选择后粘贴到编辑器中的文字
  //     detail: 'Button 按钮' // 提示内容后的说明
  //   }
  // ];

  monaco.languages.registerCompletionItemProvider('javascript', {
    // provideCompletionItems() {
    //   return { suggestions: hints };
    // },
    // triggerCharacters: ['Button'] // 触发提示的字符，可以写多个
    provideCompletionItems() {
      // return { suggestions: hints };
      return { suggestions: hints2(monaco) };
    }
  });
  monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems(){
      return { suggestions: hints };
    }
  });
  monaco.languages.registerCompletionItemProvider('javascript', fromSnippets());

  // 通过 js string添加
  monaco.languages.typescript.javascriptDefaults.addExtraLib(hints, 'hints.js');
}

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-3d 中的 import
  babelParam: getBabelParams(['amos-3d', 'amos-3d/lib/designer']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class My3DRun extends Component {
  render() {
    return (
      <OnlineCoder {...this.props} codes={generateCode} fileList={comList} registerHints={registerHints} />
    );
  }
}

CodeRunner 使用

import { CodeRunner, withRuntimeCode, getBabelParams } from 'ray-online-coder';
import dependencies from './dependencies';

const editorProps = {
  // theme: 'vs'
  theme: 'vs-dark'
};

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-framework 中的 import
  babelParam: getBabelParams(['amos-framework']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class OnlineCode extends Component {
  render() {
    return (
      <CodeRunner editorProps={editorProps} {...this.props} autoRun />
    );
  }
}

export default OnlineCode;

OnlineCoder props

params	type	default	description
autoClose	boolean	false	是否自动关闭案例列表
runCode	func	-	运行
fileList	array	-	列表
codes	object or func	-	注入列表切换时，填充的 code
registerHints	func: (monaco) => {}	-	祖册自动补全
editorProps	{}	-	editor 配置信息
onCreated	func: (editor, monaco) => {}	-	editor 创建时的回调
onDemoChange	func: (selectedKeys, info) => {}	-	列表切换时的回调

CodeRunner props

仅使用内部 editor 和 preview

params	type	default	description
runCode	func	-	运行
source	string	-	代码
registerHints	func: (monaco) => {}	-	祖册自动补全
onCreated	func: (editor, monaco) => {}	-	editor 创建时的回调
editorProps	{}	-	editor 配置信息

changelog

2025-8-27 v0.0.23

1. fix coder toolbar

2021-04-25 v0.0.14

1. modify _utils and export module

2021-04-22 v0.0.13

1. OnlineCode add autoClose、defaultCodeKey

2020-12-29 v0.0.9

1. 添加 CodeRunner

2020-12-22 v0.0.7

1. 修改 site home

2020-11-18 v0.0.4

1. 添加 resize 监听
2. 默认注入 body 变量，用于存储 preview 宽高

2020-11-13 v0.0.3

1. 去掉默认导出的RunA3DCoder

2020-11-13 v0.0.2

1. 修改 codes props，支持 function 格式

2020-11-12 v0.0.1

1. 初始化

Lecense

MIT