3xdata-brace 中文文档教程

发布于 5年前 浏览 30 更新于 3年前

brace

browserify ace 编辑器的兼容版本

浏览器支持

这个徽章显示哪些浏览器支持注释,但编辑器本身几乎适用于所有浏览器。

screenshot在您的浏览器中尝试

Installation

npm install brace

Example

var ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');

var editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

将以上内容作为条目包含在您的browserify 构建,将

添加到您的 html 页面,然后 将出现一个 JavaScript 编辑器。

如果您的浏览器支持 WebWorkers,此编辑器将显示错误/警告注释 通过 blob URL 创建(请参阅顶部的测试支持徽章)。

请参阅详细示例以获取更多信息。

Why not just use ace?

ace 编辑器通过工作脚本 url 创建 WebWorker。 这需要工作脚本驻留在您的服务器上,并强制您在您的服务器上托管 ace 编辑器。

虽然在大多数情况下这没问题,但它会阻止您提供一个完全可用的 ace 编辑器包。

使用 brace,您有两个选择:

  • include brace itself when browserifying your app to get a fully working ace editor included with your bundle (no other external scripts needed)
  • create the bundle as explained above and provide it to others so they can include it in their html page simply via a script tag

What if my browser doesn't support it?

如果 brace 无法内联 web worker,它只会回退以提供没有注释支持的 ace 编辑器。 这意味着编辑器功能齐全,但不会在左侧显示错误/警告。

据我了解,原来的 ace 编辑器的行为方式完全相同。

How does it work?

brace 有一个更新脚本<​​/a>,它会自动拉取 下载 ace builds 并重构它们以提供以下内容:

  • inline all supported workers
  • automatically require the workers that a 'mode' (language) depends on inside the mode file itself
  • provide the modes and themes at the same paths that ace's setMode and setTheme use (just replace 'ace' with 'brace') as seen in the above example

Supported Workers

支持 ace 中包含的所有 worker,php< 除外/code> 和 xquery,主要是因为我无法正确 将他们的代码字符串化(感谢任何帮助)。

Can I use it with TypeScript?

是的,大括号包含模块化类型定义,因此您可以执行正常的导入语句和类型安全检查 使用打字稿。 上面的示例变为:

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

const editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

brace 在 package.json 中公开这些类型定义,因此当您执行 npm install brace 时它们可用。 您不需要额外的安装步骤或其他工具来安装这些定义。

这些类型定义以与大括号的其余部分相同的方式保持最新。 有一个 更新脚本<​​/a>自动拉取 沿着 DefinitelyTyped 定义 并将其重构为模块化而不是全局的。

Test

npm explore brace
npm test

brace

browserify compatible version of the ace editor.

browser support

This badge shows which browsers support annotations, however the editor itself works in pretty much every browser.

screenshotTry it in your browser

Installation

npm install brace

Example

var ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');

var editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

Include the above as an entry in your browserify build, add a <div id="javascript-editor"></div> to your html page and a JavaScript editor will appear.

This editor will show error/warning annotations if your browser supports WebWorkers created via a blob URL (see testling support badge on top).

Please consult the detailed example for more information.

Why not just use ace?

The ace editor creates the WebWorker via a worker script url. This requires the worker scripts to reside on your server and forces you to host the ace editor on your server as well.

While that is ok in most cases, it prevents you from providing a fully working ace editor package.

With brace, you have two options:

  • include brace itself when browserifying your app to get a fully working ace editor included with your bundle (no other external scripts needed)
  • create the bundle as explained above and provide it to others so they can include it in their html page simply via a script tag

What if my browser doesn't support it?

If brace is unable to inline the web worker, it just falls back to provide the ace editor without annotation support. This means the editor is fully functional, but doesn't display errors/warnings on the left side.

As far as I understand, the original ace editor behaves in exactly the same way.

How does it work?

brace has an update script which automatically pulls down the ace builds and refactors them to provide the following:

  • inline all supported workers
  • automatically require the workers that a 'mode' (language) depends on inside the mode file itself
  • provide the modes and themes at the same paths that ace's setMode and setTheme use (just replace 'ace' with 'brace') as seen in the above example

Supported Workers

All workers included with ace are supported, except php and xquery, mainly because I wasn't able to properly stringify their code (any help with that is appreciated).

Can I use it with TypeScript?

Yes, brace includes modular type definitions so you can do normal import statements and type safety checking with TypeScript. The example above becomes:

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

const editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

brace exposes these type definitions in package.json, so they are available when you do npm install brace. You do not need an additional install step or another tool to install these definitions.

These type definitions are kept up to date in the same way as the rest of brace. There is an update script which automatically pulls down the DefinitelyTyped definition and refactors it to be modular rather than global.

Test

npm explore brace
npm test
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文