1

我正在寻找一个好的 JSON 编辑器，尤其是在我的 Meteor 项目中嵌入多个选择/光标。我想知道是否已经有 Meteor 可用。我看过这个：http ://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors但 Meteor 使用 Handlebars 模板框架，我不确定 JSON 编辑器如何与 Handlebars 啮合。有任何想法吗？

编辑：我想使用 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;
}

我遇到的一个问题是，当 {{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 回答