特に 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/ ソースコードはどこですか? ジョン