Question

我正在开发基于此样板的应用：react-app-boilerplate

我想将javascript模式应用于codemirror，但我得到了一个未定义的CodeMirror＆＃39; syble插入http://codemirror.net/mode/javascript/javascript.js

时发现的外部脚本时出错

我不确定如何在这个配置中管理所有内容，我试图在javascript.js文件中要求react-codemirror中的CodeMirror对象，但是没有成功。

<style>#map_canvas {height: 400px;}</style>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geocoder"></script>
<input type="text" id="search_address" value=""/>
<button onclick="search();">Search</button>
<hr>
<input id="display" placeholder="coordinates"/>
<script>
var geocoder;
var polygonPoints = [];
var polygonObject;
var markers = [];  // marker objects

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myCenter = new google.maps.LatLng(50.5, 4.5);
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myCenter
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function search() {
  geocoder.geocode(
    {'address': document.getElementById("search_address").value}, 
    function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
        var location = results[0].geometry.location;
        // let's add that point to the polygon
        addPointToPolygon(location);
        // add a marker there.  Feel free to delete next line, if you don't want a marker there
        markers.push(newMarker(location, map));
        // center map on that point
        map.setCenter(location);
        // display the points in an text element (input)
        displayPoints(polygonPoints);
        // make sure the map shows all the points
        fitBounds(polygonPoints, map);
      } 
    }
  );
};

function addPointToPolygon(location) {
  // add the point to the array
  polygonPoints.push(location);
  // a polygon must have 3 points or more
  if(polygonPoints.length >= 3) {
    // first destroy the previous polygon (with 1 fewer point)
    if(polygonObject) {
      polygonObject.setMap(null);
    }
    // new polygon
    polygonObject = polygon(polygonPoints, map);
  }
}

// returns a polygon object
function polygon(points, map) {
  // Construct the polygon.
  return new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });  
}

function newMarker(location, map) {
  return new google.maps.Marker({
    position: location,
    map: map
  });
}

function displayPoints(locations) {
  for (var i in locations) {
    document.getElementById("display").value += locations[i].lat() +','+ locations[i].lng() +' ; ';
  }
}

function fitBounds(locations, map) {
  // only fit bounds after 2 or more points.
  if (locations.length < 2) {
    return false;
  }
  var bounds = new google.maps.LatLngBounds();
  for (var i in locations) {
    bounds.extend(locations[i]);
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

需要预先需要的所有CodeMirror模式和插件 - 在需要时，他们使用CodeMirror.defineMode()进行自我配置，以便在CodeMirror稍后尝试使用它们时找到它们。< / p>

e.g。对于您正在使用的样板，在呈现您的应用之前，需要在其main.js模块中使用JavaScript模式：

require('codemirror/mode/javascript/javascript')

如何在此React + Browserify环境中应用Codemirror模式

1 个答案: