草庐IT

javascript - 从 CDN 加载 Ace 编辑器

coder 2024-05-13 原文

我正在从 Cloudfront CDN 加载 Ace 编辑器，就像在他们的示例页面上所说的那样，但它找不到 haml 和 stylus 语法荧光笔。

%script(src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js")

大多数主题和语法高亮器都可以使用，但缺少这两个:

GET http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/mode-stylus.js 403 (Forbidden) ace.js:1
GET http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/mode-haml.js 403 (Forbidden)

这些文件存在于构建库中。是否有更新的 CDN，还是我必须自己托管它？

最佳答案

我发现使用 OP 的 CDN 也会导致事后加载不同语言时出现问题。这导致我使用与 ACE 的厨房水槽演示相同的来源:

//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js

这可能很粗鲁，因为它有效地将 github 用作 CDN...

我构建了一个不错的小 jsfiddle 来演示在初始编辑器构建后以不同模式加载。

http://jsfiddle.net/KGhT4/ 

<style>
#editor {
    position: relative;
    height:400px;
    width: 400px
}
</style>
<select id="mode" size="1">
    <option value="ace/mode/abap">abap</option>
    <option value="ace/mode/actionscript">actionscript</option>
    <option value="ace/mode/ada">ada</option>
    <option value="ace/mode/asciidoc">asciidoc</option>
    <option value="ace/mode/assembly_x86">assembly_x86</option>
    <option value="ace/mode/autohotkey">autohotkey</option>
    <option value="ace/mode/batchfile">batchfile</option>
    <option value="ace/mode/c9search">c9search</option>
    <option value="ace/mode/c_cpp">c_cpp</option>
    <option value="ace/mode/clojure">clojure</option>
    <option value="ace/mode/cobol">cobol</option>
    <option value="ace/mode/coffee">coffee</option>
    <option value="ace/mode/coldfusion">coldfusion</option>
    <option value="ace/mode/csharp">csharp</option>
    <option value="ace/mode/css">css</option>
    <option value="ace/mode/curly">curly</option>
    <option value="ace/mode/d">d</option>
    <option value="ace/mode/dart">dart</option>
    <option value="ace/mode/diff">diff</option>
    <option value="ace/mode/django">django</option>
    <option value="ace/mode/dot">dot</option>
    <option value="ace/mode/ejs">ejs</option>
    <option value="ace/mode/erlang">erlang</option>
    <option value="ace/mode/forth">forth</option>
    <option value="ace/mode/ftl">ftl</option>
    <option value="ace/mode/glsl">glsl</option>
    <option value="ace/mode/golang">golang</option>
    <option value="ace/mode/groovy">groovy</option>
    <option value="ace/mode/haml">haml</option>
    <option value="ace/mode/handlebars">handlebars</option>
    <option value="ace/mode/haskell">haskell</option>
    <option value="ace/mode/haxe">haxe</option>
    <option value="ace/mode/html">html</option>
    <option value="ace/mode/html_ruby">html_ruby</option>
    <option value="ace/mode/ini">ini</option>
    <option value="ace/mode/jade">jade</option>
    <option value="ace/mode/java">java</option>
    <option value="ace/mode/javascript" selected>javascript</option>
    <option value="ace/mode/json">json</option>
    <option value="ace/mode/jsoniq">jsoniq</option>
    <option value="ace/mode/jsp">jsp</option>
    <option value="ace/mode/jsx">jsx</option>
    <option value="ace/mode/julia">julia</option>
    <option value="ace/mode/latex">latex</option>
    <option value="ace/mode/less">less</option>
    <option value="ace/mode/liquid">liquid</option>
    <option value="ace/mode/lisp">lisp</option>
    <option value="ace/mode/livescript">livescript</option>
    <option value="ace/mode/logiql">logiql</option>
    <option value="ace/mode/lsl">lsl</option>
    <option value="ace/mode/lua">lua</option>
    <option value="ace/mode/luapage">luapage</option>
    <option value="ace/mode/lucene">lucene</option>
    <option value="ace/mode/makefile">makefile</option>
    <option value="ace/mode/markdown">markdown</option>
    <option value="ace/mode/matlab">matlab</option>
    <option value="ace/mode/mushcode">mushcode</option>
    <option value="ace/mode/mushcode_high_rules">mushcode_high_rules</option>
    <option value="ace/mode/mysql">mysql</option>
    <option value="ace/mode/objectivec">objectivec</option>
    <option value="ace/mode/ocaml">ocaml</option>
    <option value="ace/mode/pascal">pascal</option>
    <option value="ace/mode/perl">perl</option>
    <option value="ace/mode/pgsql">pgsql</option>
    <option value="ace/mode/php">php</option>
    <option value="ace/mode/powershell">powershell</option>
    <option value="ace/mode/prolog">prolog</option>
    <option value="ace/mode/properties">properties</option>
    <option value="ace/mode/python">python</option>
    <option value="ace/mode/r">r</option>
    <option value="ace/mode/rdoc">rdoc</option>
    <option value="ace/mode/rhtml">rhtml</option>
    <option value="ace/mode/ruby">ruby</option>
    <option value="ace/mode/rust">rust</option>
    <option value="ace/mode/sass">sass</option>
    <option value="ace/mode/scad">scad</option>
    <option value="ace/mode/scala">scala</option>
    <option value="ace/mode/scheme">scheme</option>
    <option value="ace/mode/scss">scss</option>
    <option value="ace/mode/sh">sh</option>
    <option value="ace/mode/snippets">snippets</option>
    <option value="ace/mode/sql">sql</option>
    <option value="ace/mode/stylus">stylus</option>
    <option value="ace/mode/svg">svg</option>
    <option value="ace/mode/tcl">tcl</option>
    <option value="ace/mode/tex">tex</option>
    <option value="ace/mode/text">text</option>
    <option value="ace/mode/textile">textile</option>
    <option value="ace/mode/toml">toml</option>
    <option value="ace/mode/twig">twig</option>
    <option value="ace/mode/typescript">typescript</option>
    <option value="ace/mode/vbscript">vbscript</option>
    <option value="ace/mode/velocity">velocity</option>
    <option value="ace/mode/verilog">verilog</option>
    <option value="ace/mode/xml">xml</option>
    <option value="ace/mode/xquery">xquery</option>
    <option value="ace/mode/yaml">yaml</option>
</select>
<div id="editor">function foo(items) { 
  var x = "All this is syntax highlighted"; 
  return x;
}</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.getSession().setUseWorker(false);
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

    $('#mode').on('change', function (ev) {
        var mode = $('option:selected').attr('value');
        //console.log(mode)
        editor.getSession().setMode(mode);
    });
</script>

关于javascript - 从 CDN 加载 Ace 编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17637091/

javascriptCDNoptionvalue34ace-editor

有关javascript - 从 CDN 加载 Ace 编辑器的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  8. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位

  9. ruby-on-rails - 是否可以让 ActiveRecord 为使用 :joins option? 加载的行创建对象 - 2

    我需要做这样的事情classUser'User',:foreign_key=>'abuser_id'belongs_to:gameendclassGame['JOINabuse_reportsONusers.id=abuse_reports.abuser_id','JOINgamesONgames.id=abuse_reports.game_id'],:group=>'users.id',:select=>'users.*,count(distinctgames.id)ASgame_count,count(abuse_reports.id)asabuse_report_count',:

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐