• @cloudstudio/embed-editor
  • Demo
  • API
  • Screenshot

@cloudstudio/embed-editor

需要手动引用上报 sdk https://beacon.cdn.qq.com/sdk/4.5.9/beacon_web.min.js

Demo

const codes = [
  {
    lang: 'python',
    code: `# 图形输出测试
  import matplotlib
  import matplotlib.pyplot as plt

  matplotlib.use('Agg')


  x = [1, 2, 3, 4, 5]
  y = [1, 4, 9, 16, 25]

  plt.plot(x, y)

  plt.title('Line Graph Example')
  plt.xlabel('X Axis')
  plt.ylabel('Y Axis')

  plt.savefig('plot3.jpg')

  print('hello Could not load the Qt platform plugin');`,
    key: 'code_key_1',
    count: 10,
  },
  {
    lang: 'python',
    code: defaultCodeContent,
    key: 'code_key_2',
  },
];

<Modal
  code="abc"
  index={0}
  codes={codes}
  visible={true}
  onChange={handleChange}
  articleId="article-one"
  isAuthor
  onClose={onClose}
  onVisibleChange={setVisible}
  onCount={(changedCode, changedCodes) => {
    console.log('运行次数改变回调', changedCode, changedCodes);
  }}
  onCopyLegacyLink={() => console.log('复制链接成功')}
></Modal>;

API

| 属性名称 | 类型 | 描述 | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | code | string | 代码运行凭证，存在有效期，控制安全 | | index | number | 当前代码索引 | | codes | { lang: string; code: string; key: string; count?: number; }[] | 文章所有的代码块 | | articleId | string (可选) | 文章 id (编辑态下无此参数) | | onCount | (changedCodeObject: { lang: string; code: string; key: string; count?: number; }, allCodesObject: { lang: string; code: string; key: string; count?: number; }[]) => void (可选) | 代码块运行次数回调 | | onChange | (changedCodeObject: { lang: string; code: string; key: string; count?: number; }, allCodesObject: { lang: string; code: string; key: string; count?: number; }[]) => void (可选) | 代码改变回调 {changedCodeObject: 变化的 CodeObject, allCodesObject: 变化后的所有 CodeObject[]} | | onInsert | (rowData: any, codesObject: { lang: string; code: string; key: string; count?: number; }) => void (可选) | 插入运行结果 | | isAuthor | boolean (可选) | 是否是作者，作者才能同步代码 | | status | 'preview' | 'edit' (可选) | 文章状态 | | onCopyLegacyLink | (e: SyntheticEvent) => void (可选) | 在不支持运行的环境内；复制链接回调 | | onVisibleChange | Dispatch<SetStateAction> (可选) | 弹窗 visible 改变回调(最小化模式 props.onClose 可不传) |

Screenshot