react组件: ace-editor

最新推荐文章于 2024-08-10 07:36:03 发布

灵谷

最新推荐文章于 2024-08-10 07:36:03 发布

阅读量1.4k

点赞数

分类专栏： frontEnd

本文链接：https://blog.csdn.net/u010682774/article/details/118365359

版权

frontEnd 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一个高性能的网页代码编辑器。

原生js用法

<div id="editor" style="height: 500px; width: 500px">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
	
	// 设置主题色
	editor.setTheme("ace/theme/twilight");
	
	// 设置模式，默认纯文本模式
	editor.session.setMode("ace/mode/javascript");
</script>

React组件用法

安装

npm install react-ace ace-builds

配置

1. mode

语言类型：

javascript
java
xml
json
mysql
等等

2. theme

monokai 黑色
github 白色
tomorrow
xcode
terminal
等等

3. font size

文本的大小：10、12…

4. number of splits

拆分的数量

5. gutter/margin/highlight/snippets/line-numbers/height/width/tabSize

编辑器的表现形式：边距、高亮、行标记等等。

width/height: 默认为：500px

tabSize: 默认为：4

使用

1. 普通编辑器

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

2. 拆分编辑器

同时展现多个编辑器。

import React from "react";
import { render } from "react-dom";

import { split as SplitEditor } from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

// Render editor
render(
  <SplitEditor
    mode="java"
    theme="github"
    splits={2}
    orientation="below"
    value={["hi", "hello"]}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

3. 差异编辑器

代码对比，高亮差异部分。

import React, { Component } from "react";
import { render } from "react-dom";
import { diff as DiffEditor } from "react-ace";

import "ace-builds/src-noconflict/theme-github";

render(
  <DiffEditor
    value={["Test code differences", "Test code difference"]}
    height="1000px"
    width="1000px"
    mode="text"
  />
);