エディタはアドオンに埋め込むことのできるコードエディタコンポーネントです。現在、このコンポーネントはすべての既存の Firefox 開発ツールで使用されています。このエディタコンポーネントは、CodeMirror オープンソースエディタのラッパーです。

基本的な使い方

コンポーネントを使用する最も簡単な方法は、モジュールをインポートし、Editorオブジェクトのインスタンスを作成し、そのappendToメソッドを使用してエディタインスタンスをDOMノードにアタッチします。

let Editor = require("devtools/sourceeditor/editor");
let editor = new Editor();
editor.appendTo(parentNode);

このコードは新しいエディタインスタンスを作成し、それを parentNode 変数によって DOM ノード参照にアタッチします。重要なことに、parentNode は親として機能する要素でなければなりません。

新しいインスタンスを作成する場合は、オプションのパラメータとして設定オブジェクトを渡すことができます。

let editor = new Editor({
  value: "// hello",
  mode: Editor.modes.js,
  lineNumbers: true
});

この構成オブジェクトは CodeMirror の構成オブジェクトと同じプロパティを保持できます。唯一の違いは 'mode' プロパティです。現在、次の構文強調表示モードをサポートしています。

  • プレーンテキスト用の Editor.modes.text
  • JavaScript 用の Editor.modes.js (ES2015 を含む)
  • CSS 用の Editor.modes.css
  • HTML 用の Editor.modes.html (埋め込み CSS と JS を含む)
  • WebGL シェーダー用の Editor.modes.vsEditor.modes.fs (x-vertex と x-fragment, それぞれ).

API

エディタは CodeMirror のラッパーですので、CodeMirror メソッドをそのまま公開します。詳細については CodeMirror のドキュメントページを参照してください。このページの残りの部分では、CodeMirror とその概念に精通していることを前提としています。次のメソッドは CodeMirror で提供されるメソッドと同じです。

  • focus()
  • hasFocus() → boolean
  • lineCount() → integer
  • somethingSelected() → boolean
  • getCursor(?start: string) → {line, ch}
  • setSelection(anchor: {line, ch}, ?head: {line, ch})
  • getSelection() → string
  • replaceSelection(replacement: string, ?collapse: string)
  • extendSelection(from: {line, ch}, ?to: {line, ch})
  • undo()
  • redo()
  • clearHistory()
  • openDialog(template: element, callback: function, ?options:object)
  • refresh()
  • setOption(option: string, value: any)
  • getOption(option: string) → any

これらのメソッドは CodeMirror に存在しないか、動作が異なります。

説明 ステータス
appendTo(el: element, ?env: iframe) → promise
el で指定された要素に現在の Editor インスタンスを追加します。オプションの第2パラメータとして、エディタをホストする独自の iframe を提供することもできます (そうしない場合、エディタは新しい iframe を作成します)。
Stable
getMode() object
現在アクティブな構文モードを返します。サポートされているすべてのモードのリストについては上記を参照してください。
Stable
setMode(mode: object)
構文モードを設定します。サポートされているすべてのモードのリストについては上記を参照してください。
Stable
getText(?line: number) → string
現在のエディターのコンテンツを返します。line 引数が指定された場合、このメソッドはその行だけを返します。
Stable
setText(value: string)
エディターのテキスト内容を指定された値に置き換えます。
Stable
replaceText(value: string, ?from:{ch, line}, ?to:{ch, line})
指定された from/to の範囲内のエディターのコンテンツを、指定された値に置き換えます。引数の from と to のどちらも指定されていない場合、このメソッドは setText とまったく同じように動作します。from オブジェクトのみが提供されている場合は、そのポイントにテキストを挿入し、必要な数の文字を上書きします
Stable
insertText(value: string, at: {ch, line})
指定された at の位置にテキストを挿入し、必要に応じて既存の内容を移動します。
Stable
dropSelection()
現在のエディタのコンテンツの選択を解除します。
Stable
getFirstVisibleLine() → number
最初に表示される行の行番号を返します。
Stable
setFirstVisibleLine(line: number)
指定された行がエディタの上部に表示される最初の行になるように、エディタの内容をスクロールします。
Stable
setCursor(pos: {line, ch}, align: string)
エディタの "top"、"center"、または "bottom" にラインを揃えるオプションを追加して、指定した {line, ch} 位置にカーソルを設定します。"top" がデフォルト値である。
Stable
alignLine(line: number, align: string)
エディタビューの "top"、"center"、または "bottom" のいずれかに、提供された行を上または下から最大3行のマージンに揃えます。
Unstable
hasMarker(line: number, gutterName: string, markerClass: string) → boolean
指定されたクラスのマーカーがラインの gutter に存在するかどうかを返します。
Stable
addMarker(line: number, gutterName: string, markerClass: string)
指定されたクラスを持つマーカーをラインの gutter に追加します。その行に別のマーカーが存在する場合、新しいマーカークラスがそのクラスリストに追加されます。
Stable
removeMarker(line: number, gutterName: string, markerClass: string)
指定されたクラスのマーカーをラインの gutter から削除します。
Stable
removeAllMarkers(gutterName: string)
指定された名前で、gutter の中のすべての gutter マーカーを削除します。
Stable
setMarkerListeners(line: number, gutterName: string, markerClass: string, events: object, data: object)
マーカー上に一連のイベントリスナーをアタッチします。 それらは、オブジェクト名としてキーをイベントリネラルとして渡し、値を関数リスナとして渡す必要があります。 行番号、マーカーノード、およびオプションのデータは、関数リスナーに引数として渡されます。 これらのイベントリスナーの削除について心配する必要はありません。 マーカーをクリアすると、それらは自動的に孤立します。
Unstable
hasLineClass(line: number, className: string) → boolean
指定されたクラス名を使用して、行が修飾されているかどうかを返します。
Stable
addLineClass(line: number, className: string)
テキストとガターを含む、指定された行の CSS クラス名を設定します。
Stable
removeLineClass(line: number, className: string)
指定された行の CSS クラス名を削除します。
Stable
markText(from: {line,ch}, to: {line,ch}, className: string) → { anchor: element, clear: function }
2つの {line, ch} 境界内のテキストの範囲をマークします。 範囲を変更することができるため、たとえば、テキストを入力するときに、このメソッドはマークを削除するために使用できる関数を返します。
Stable
getPosition(index: number|list) → {line, ch}|list
0から始まるインデックスに対して、1つ以上の{line、ch}オブジェクトを計算して返します。値はエディタのテキストの開始位置からの相対値です。 引数が1つだけの場合、このメソッドは単一の{line、ch}オブジェクトを返します。 それ以外の場合は、配列を返します。
Stable
getOffset(pos: {line, ch}|list) → number|list
getPosition の逆です。getPosition と同様に、このメソッドは、1つの引数が与えられた場合、または配列の場合にのみ、単一の値を返します。
Stable
getPositionFromCoords(coord: {left, top}) → {line, ch}
左と上の座標に対応する {line, ch} オブジェクトを返します。
Stable
getCoordsFromPosition(pos: {line, ch}) → {left, top}
getPositionFromCoords の逆です。 同様に、指定された行と文字番号に対応する {left、top} オブジェクトを返します。
Stable
canUndo() → boolean
取り消すものがある場合は true を返し、そうでない場合は false を返します。
Stable
canRedo() → boolean
再実行するものがあれば true を返し、そうでなければ false を返します。
Stable
setClean() → number
内容をクリーンとしてマークし、現在のバージョン番号を返します。
Stable
isClean() → boolean
テキスト領域の内容がクリーンである場合は true を返します。つまり、前回のバージョン以降に変更はありませんでした。
Stable
jumpToLine()
エディタ内のダイアログを開き、行をジャンプするように要求します。一度指定すると、その行にカーソルが移動します。
Stable
moveLineUp()
現在の行または選択された行の内容を1行上に移動します。
Unstable
moveLineDown()
現在の行または選択された行の内容を1行下に移動します。
Unstable

extend(funcs: object)
追加の関数で Editor オブジェクトのインスタンスを拡張します。各関数は、最初の引数として context を指定して呼び出されます。Context は {ed, cm} オブジェクトであり、'ed' は Editor オブジェクトのインスタンスであり、 'cm' は CodeMirror オブジェクトのインスタンスです。 例:

function hello(ctx, name) {
  let { cm, ed } = ctx;
  cm; // CodeMirror instance
  ed; // Editor instance
  name; // "Mozilla"
}

editor.extend({ hello: hello });
editor.hello("Mozilla");
これはエディタの拡張機能を書くために推奨される方法です。
Stable
destroy()
すべての参照をクリーンアップし、'destroy' イベントを発行します。
Stable

静的メソッド

説明 ステータス
Editor.accel(key: string, ?modifiers:object) → string
OS 固有の修飾子を持つショートカットキーの文字列表現を返します。 Mac の場合は Cmd-、他のプラットフォームの場合は Ctrl-キーを押します。修飾子オブジェクトを渡すことで、Shift- 修飾子と Alt- 修飾子を切り替えることもできます。例:
 
// Assuming Mac platform
Editor.accel("F"); // Cmd-F
Editor.accel("F", { shift: true }); // Shift-Cmd-F
Editor.accel("F", { alt: true }); // Cmd-Alt-F
Stable
Editor.keyFor(cmd: string) → string
cmd で指定され、sourceeditor.properties で定義されたコマンドのショートカットのローカライズされた文字列表現を返します。
Stable

アドオン

私たちはいくつかの CodeMirror アドオンを配布しています。それらを使用するには、次の設定オプションを有効にするだけです。

  • styleActiveLine: 現在アクティブな行を強調表示します (デフォルトで on)
  • autoCloseBrackets: 閉じ括弧が自動的に追加されます (デフォルトで on)
  • matchBrackets: マッチする括弧が強調表示されます (デフォルトで on)
  • showTrailingSpace: 末尾のスペースを強調表示します (デフォルトでは off)
  • enableCodeFolding: コードの折り畳みを有効にします (デフォルトでは off)

キーマップ

さらに3つのキーマップが含まれています。VIM、Emacs、および Sublime Text モード用です。それらを有効にするには、keyMap 設定オプションをemacs、vim、または sublime のいずれかに設定します。それに加えて、デフォルトのキーマップは about:config の devtools.editor.keymap オプションで制御することができます。

フィードバック

フィードバックは Developer Tools メーリングリストをご利用ください。 バグを発見したと思われる場合は、そのバグをお知らせください

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,