2016-04-08 4 views
1

Я хочу сделать онлайн-демонстрацию javascript, и я хочу разрешить пользователям изменять демо-поведение, изменяя код. Мой проект использует RequireJS с большим успехом, поэтому я решил придерживаться его. Сначала я пытался загрузить редактор через абсолютные пути URL:Загрузка кодаMirror с RequireJS из CDN

require(
    [ 
     "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js", 
     "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js", 
     "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/continuecomment.js", 
     "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/edit/matchbrackets.js", 
     "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/comment.js" 
    ], 
    (CodeMirror)=>{ 
     var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
      lineNumbers: true, 
      matchBrackets: true, 
      continueComments: "Enter", 
      extraKeys: {"Ctrl-Q": "toggleComment"} 
     }); 
    } 
); 

Требовать JS пытается загрузить этот путь, то: http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/lib/codemirror Очевидно, что это неправильно, потому что

  1. Я не просил его поставить /lib/ перед мой путь, так почему он это сделал?
  2. .js отсутствует.

После этой неудачи, я пытался настроить requireJS и использовать относительные пути:

requirejs.config({ 
    paths: { 
     codemirror: [ 
      "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/" 
     ] 
    }, 
    waitSeconds: 20 
}); 

require(
    [ 
     "codemirror/codemirror", 
     "codemirror/mode/javascript/javascript", 
     "codemirror/addon/comment/continuecomment", 
     "codemirror/addon/edit/matchbrackets", 
     "codemirror/addon/comment/comment" 
    ], 
    (CodeMirror)=>{ 
     var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
      lineNumbers: true, 
      matchBrackets: true, 
      continueComments: "Enter", 
      extraKeys: {"Ctrl-Q": "toggleComment"} 
     }); 
    } 
); 

На этот раз, .js есть, но путь по-прежнему не так: http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4//lib/codemirror.js Обратите внимание на двойной слеш.

Я не просил RequireJS помещать случайные вещи в указанный мной путь, так почему он это делает? Как я могу сделать эту работу?

ответ

1

Проблема заключается в том, что CodeMirror обычно упакованы таким образом, что файл codemirror.js находится в каталоге /lib, однако, как он размещен на cdnjs является то, что он находится в корневом каталоге. Ваша проблема возникает тогда, когда вы пытаетесь загрузить надстройку, которая затем пытается загрузить ../../lib/codemirror - которая не существует из-за вышеупомянутой разницы в хостинге.

Я получил его на работу с чем-то вроде этого:

requirejs.config({paths:{ 
    codemirror:'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2', 
    'codemirror/lib':'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2'} 
}); 
requirejs(["codemirror/lib/codemirror", "codemirror/addon/comment/continuecomment"], 
function(CodeMirror) { 
}); 
Смежные вопросы