Question

我刚开始使用CodeMirror（4.1）并且正在使用RequireJs。（我也使用ReactJs，但我很确定这不是问题）

我显然没有正确配置它。如果有人能指出我的错误，我将不胜感激。

我的配置看起来像这样

require.config({

deps: ["main"],

paths: {
  ...
  codemirror:          "../../external/codemirror/codemirror-4.1/lib/codemirror",
  cmsql:               "../../external/codemirror/codemirror-4.1/mode/sql/sql"
},

shim: {
  ...
  codemirror:          { exports: "codemirror" },
  cmsql:               { deps: ["codemirror"],  exports: "cmsql" }    
}

}）;

我正在实例化的模块如下：

define(['jquery', 'react', 'codemirror', 'cmsql'],
function ($, React, CodeMirror) {

return React.createClass({

  render: function () {
    console.log("render-editarea");
    return (
      <textarea id="editarea">
      -- Comment here
      SELECT ID 
      FROM [Patient Demographics]
      </textarea>
    )
  },

  componentDidMount: function () {                  
    var editorNode = document.getElementById("editarea"); 
    var editor = CodeMirror.fromTextArea(editorNode, {        
      lineNumbers: true,
      matchBrackets: true,
      indentUnit: 4,
      mode: "text/x-sql"
    });          
  },

  });
});

使用模块加载器时，CodeMirror手册似乎显示此配置。

我可以看到CodeMirror在说行号等方面的效果，但在语法着色方面却看不到

enter image description here

所以任何帮助都会感激不尽。

取值

Answer 1

为什么一发帖就行了......

答案是（一旦我将手册消化了一点）

require.config({

  deps: ["main"],

  paths: {
    cm:                  "../../external/codemirror/codemirror-4.1"
  },

  shim: {
    ...
  }

});

和

define(['jquery', 'react', 'cm/lib/codemirror', 'cm/mode/sql/sql'],
  function ($, React, CodeMirror) {
   ...

Answer 2

感谢您提供此解决方案。它对我有用。在require中，指向基本CodeMirror目录，然后引用如上所示。 CodeMirror似乎使用似乎混淆要求的相对路径（可能是相反的方式）。

RequireJS / CodeMirror（sql模式） - 如何使其工作

2 个答案: