信息资讯综合思念体

【前端】在requirejs中加载Ace编辑器

今天遇到了一个老大坑,就是ace中对于如何使用 requirejs 写的非常少,在这里补充细节:


原demo是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
    overflow: hidden;
}

#editor {
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>
</head>
<body>

<pre id="editor">function foo(items) {
    var i;
    for (i = 0; i &lt; items.length; i++) {
    alert("Ace Rocks " + items[i]);
    }
}</pre>

<script src="../demo/kitchen-sink/require.js"></script>
<script>
require.config({paths: {ace: "../src"}})
define('testace', ['ace/ace'],
    function(ace, langtools) {
        console.log("This is the testace module");
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/javascript");
        require(["ace/requirejs/text!src/ace"], function(e){
        editor.setValue(e);
    })
});

require(['testace'])
</script>

</body>
</html>


事实上:

require.config({paths: {ace: "../src"}})

这一段缺少了很多东西。

require.config({
    paths: {
        ace: "../src",
        language_tools: "../src/ext-language_tools",
    },
    
    // 还需要加上如下一大坨
    bundles: {
        "ace/ace": [
            "ace/lib/fixoldbrowsers",
            "ace/lib/useragent",
            "ace/lib/dom",
            "ace/lib/oop",
            "ace/lib/keys",
            "ace/lib/event",
            "ace/range",
            "ace/lib/lang",
            "ace/clipboard",
            "ace/keyboard/textinput",
            "ace/mouse/default_handlers",
            "ace/tooltip",
            "ace/mouse/default_gutter_handler",
            "ace/mouse/mouse_event",
            "ace/mouse/dragdrop_handler",
            "ace/mouse/touch_handler",
            "ace/lib/net",
            "ace/lib/event_emitter",
            "ace/lib/app_config",
            "ace/config",
            "ace/mouse/mouse_handler",
            "ace/mouse/fold_handler",
            "ace/keyboard/keybinding",
            "ace/lib/bidiutil",
            "ace/bidihandler",
            "ace/selection",
            "ace/tokenizer",
            "ace/mode/text_highlight_rules",
            "ace/mode/behaviour",
            "ace/token_iterator",
            "ace/mode/behaviour/cstyle",
            "ace/unicode",
            "ace/mode/text",
            "ace/apply_delta",
            "ace/anchor",
            "ace/document",
            "ace/background_tokenizer",
            "ace/search_highlight",
            "ace/edit_session/fold_line",
            "ace/range_list",
            "ace/edit_session/fold",
            "ace/edit_session/folding",
            "ace/edit_session/bracket_match",
            "ace/edit_session",
            "ace/search",
            "ace/keyboard/hash_handler",
            "ace/commands/command_manager",
            "ace/commands/default_commands",
            "ace/editor",
            "ace/undomanager",
            "ace/layer/lines",
            "ace/layer/gutter",
            "ace/layer/marker",
            "ace/layer/text",
            "ace/layer/cursor",
            "ace/scrollbar",
            "ace/renderloop",
            "ace/layer/font_metrics",
            "ace/virtual_renderer",
            "ace/worker/worker_client",
            "ace/placeholder",
            "ace/mouse/multi_select_handler",
            "ace/commands/multi_select_commands",
            "ace/multi_select",
            "ace/mode/folding/fold_mode",
            "ace/theme/textmate",
            "ace/line_widgets",
            "ace/ext/error_marker",
            "ace/ace",
        ],
        language_tools: [
            "ace/snippets",
            "ace/autocomplete/popup",
            "ace/autocomplete/util",
            "ace/autocomplete",
            "ace/autocomplete/text_completer",
            "ace/ext/language_tools",
        ],
    }
})


«   2021年9月   »
12345
6789101112
13141516171819
20212223242526
27282930
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接
  • RainbowSoft Studio Z-Blog
  • 订阅本站的 RSS 2.0 新闻聚合

Powered By Z-BlogPHP 1.5.1 Zero Theme By 爱墙纸

百度资讯综合思念体对有机生命接触用人形终端界面 那就是
晋ICP备15000230号-1