iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
0
Modern Web

30天學習30套前端技術(2018年)系列 第 15

[十分鐘學習] Ace - 全球最大的程式語言編輯器上線了

example1

Ace是透過JavaScript所開發的線上程式語言編輯器套件,無論功能和性能都類似一般編輯器(Sublime、Vim和TextMate等),導入進任何網頁或JavaScript應用程式中都相當容易;值得一提的是Ace是由Cloud9 IDE的團隊維護,並是Mozilla Skywriter (Bespin)專案的延伸品,品質值得依賴

GitHub Star: 16,480
Javascripting Overall: 95%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: BSD


《安裝》

  • CDN

      <!-- Ace v1.2.9 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
    
  • npm

      npm install ace-builds
    

《範例》

  • Twilight風格編輯器

      <div id="example">...</div>
      <style>
      	#example {
      		width: 100%;
      		height: 240px;
      	}
      </style>
      <script>
      	var editor = ace.edit( "example" ); 
      	editor.setTheme( "ace/theme/twilight" ); // 模板(列表[註2])
      	editor.session.setMode( "ace/mode/javascript" ); // 模式(列表[註3])
      </script>
    
  • 可唯讀、搜尋的編輯器

    example2

      <div id="example">...</div>
      Search: <input type="text" id="keyword" /><input type="button" onclick="search()" value="Next" />
      <style>
      	#example {
      		width: 100%;
      		height: 240px;
      	}
      </style>
      <script>
      	var editor = ace.edit( "example" ); 
      	editor.setReadOnly(true); // 不允許寫入
      	editor.session.setMode( "ace/mode/javascript" ); // 模式(列表[註3])
      	function search ()
      	{
      		editor.find( document.getElementById( "keyword" ).value, {
      			// 搜尋參數設定[註1]
      			backwards: false, // 從底部往上搜尋
      			wrap: false, // 當搜尋至底部時,則返回頂端
      			caseSensitive: false, // 大小寫要完全符合
      			wholeWord: false, // 單字要完全符合
      			regExp: false // 正規表達式
      		});
      		editor.findNext();
      		editor.findPrevious();
      	}
      </script>
    

    [註1]

    參數 預設值 描述
    backwards false 從底部往上搜尋
    wrap false 當搜尋至底部時,則返回頂端
    caseSensitive false 大小寫要完全符合
    wholeWord false 單字要完全符合
    regExp false 正規表達式

    [註2]

    • ambiance
    • chaos
    • chrome
    • clouds
    • clouds_midnight
    • cobalt
    • crimson_editor
    • dawn
    • dracula
    • dreamweaver
    • eclipse
    • github
    • gob
    • gruvbox
    • idle_fingers
    • iplastic
    • katzenmilch
    • kr_theme
    • kuroir
    • merbivore
    • merbivore_soft
    • mono_industrial
    • monokai
    • pastel_on_dark
    • solarized_dark
    • solarized_light
    • sqlserver
    • terminal
    • textmate
    • tomorrow
    • tomorrow_night
    • tomorrow_night_blue
    • tomorrow_night_bright
    • tomorrow_night_eighties
    • twilight
    • vibrant_ink
    • xcode

    [註3]

    • abap
    • abc
    • actionscript
    • ada
    • apache_conf
    • applescript
    • asciidoc
    • assembly_x86
    • autohotkey
    • batchfile
    • bro
    • c9search
    • c_cpp
    • cirru
    • clojure
    • cobol
    • coffee
    • coldfusion
    • csharp
    • csound_document
    • csound_orchestra
    • csound_preprocessor
    • csound_score
    • css
    • curly
    • d
    • dart
    • diff
    • doc_comment
    • dockerfile
    • dot
    • drools
    • eiffel
    • elixir
    • elm
    • erlang
    • forth
    • fortran
    • ftl
    • gcode
    • gherkin
    • gitignore
    • glsl
    • gobstones
    • golang
    • graphqlschema
    • groovy
    • haml
    • handlebars
    • haskell_cabal
    • haskell
    • haxe
    • hjson
    • html_elixir
    • html
    • html_ruby
    • ini
    • io
    • jack
    • jade
    • java
    • javascript
    • js_regex
    • json
    • jsp
    • jssm
    • jsx
    • julia
    • kotlin
    • latex
    • less
    • liquid
    • lisp
    • logiql
    • lsl
    • lua
    • luapage
    • lucene
    • makefile
    • markdown
    • mask
    • matlab
    • maze
    • mel
    • mixal
    • mushcode
    • mysql
    • nix
    • nsis
    • objectivec
    • ocaml
    • pascal
    • perl
    • pgsql
    • php
    • pig
    • powershell
    • praat
    • prolog
    • properties
    • protobuf
    • python
    • r
    • razor
    • rdoc
    • red
    • rhtml
    • rst
    • ruby
    • rust
    • sass
    • scad
    • scala
    • scheme
    • scss
    • sh
    • sjs
    • smarty
    • soy_template
    • space
    • sparql
    • sql
    • sqlserver
    • stylus
    • svg
    • swift
    • tcl
    • tex
    • text
    • textile
    • toml
    • turtle
    • twig
    • typescript
    • vala
    • vbscript
    • velocity
    • verilog
    • vhdl
    • wollok
    • xml
    • yaml

《延伸》

  1. Ace - The High Performance Code Editor for the Web
  2. ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)

上一篇
[十分鐘學習] Animate.css - 無料!純 ‧ CSS 動畫特效
下一篇
[十分鐘學習] PDF.js - HTML5 X PDF 聯名
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言