1

特に Meteor プロジェクトに埋め込むための複数の選択/カーソルを備えた、優れた JSON エディターを探しています。Meteor で既に利用可能かどうか疑問に思っています。これを見たことがあります: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editorsですが、Meteor はハンドルバーをテンプレート フレームワークとして使用しており、JSON エディターがハンドルバーとどのように噛み合うかはわかりません。何か案は?

編集: Mozilla/Cloud 9 の ACE を使用したいのですが、これを Meteor と統合する方法についてのアイデアはありますか?

編集:現在、私のコードは次のようになっています(別のファイルで):

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<template name="canvas">
<div id="canvas">
{{#each jsons}}
<div draggable="true" class="json" id="json_{{_id}}">
    {{title}}<br/>
    <input type="file" accept="text/json"/>
    <hr/>
    <div class="editor" id="text_{{_id}}">{{data}}</div>
</div>
{{/each}}
</div>
</template>

var editor = ace.edit("text_"+json_id);
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

.editor {
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

私が抱えている問題の 1 つは、{{data}} が置き換えられると、エディターがなくなることです。誰かがそれを修正する良い方法を知っていますか? 再初期化してみます。

編集:ここで同様の質問:テンプレートではなくコレクションの変更を購読する

これが私が自動購読する方法です。

 Meteor.autosubscribe(function () {
   Meteor.subscribe("jsons");
 });

最初にエディターを作成したマウス アクションで ace エディターを再作成すると機能しますが、コードからの再初期化 (FileReader からの読み込み後) は機能していないようです。エディターはきれいに印刷されたテキストで消え、再び通常の div のように見えます:

    Template.canvas.dragStart();
    $('#json_'+value._id+' input').on('change', function(ev) {
      var target = ev.target != null ? ev.target : ev.srcElement;
      var json_id = value._id;
      _.each(target.files, function(file) {
          var r = new FileReader();
          r.onload = function(e) {
                  Jsons.update({_id: json_id},
                          {$set: {data: JSON.stringify(JSON.parse(e.target.result),null,"\t") }});
                    $('.json')
                            .draggable('disable');
                    var editor = ace.edit("text_"+json_id);
                    editor.setTheme("ace/theme/monokai");
                    editor.getSession().setMode("ace/mode/javascript");
          }
          r.readAsText(file);
      });
    });
    $.each(value.inputPorts, Template.canvas.renderPort);
    $.each(value.outputPorts, Template.canvas.renderPort);

編集: また、Meteor のように、エディターを共同マルチユーザーにしたいと思います。

編集: これは素晴らしいですね: http://asteroid.meteor.com/ ソースコードはどこですか? ジョン

4

1 に答える 1

2

ほとんどの言語をサポートしているAce Editorを参照してください。

于 2014-01-17T08:00:47.433 に答える