Question

我正在寻找一个好的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}}被替换时，编辑器就会消失。有谁知道修复它的好方法？我打算尝试重新初始化。

编辑：类似问题：Subscribing to changes in a Collection but not in a template

以下是我自动订阅的方式。

 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/源代码在哪里？约翰

Answer 1

您可能希望查看它支持大多数语言的Ace Editor。

寻找一个嵌入Meteor的JSON编辑器 - 最好有多个选择/游标

1 个答案: