2015-07-12 3 views
0

Я не пытался, как я могу это сделать, к сожалению, я не мог понять, как интегрировать библиотеку codemirror в файл HTML.Как интегрировать библиотеку Codemirror в HTM-файл?

У меня есть один файл HTML, и я загрузил codemirror. Я также включил папку lib в свой html-каталог, но когда я вижу его в браузере, редактор codemirror не создается.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Web Editor</title> 
<!-- Create a simple CodeMirror instance --> 
<link rel="stylesheet" href="lib/codemirror.css"> 
<script src="lib/codemirror.js"></script> 
<script> 
    var editor = CodeMirror.fromTextArea(myTextarea, { 
    lineNumbers: true 
    }); 
</script> 
</head> 
    <body> 
     <table> 
      <tr> 
       <td> 
        <div class="tag">HTML (Body)</div> 
        <div id="html" class="content" contenteditable></div> 
       </td> 
       <td> 
        <div class="tag">CSS</div> 
        <div id="css" class="content" contenteditable></div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div class="tag">JavaScript</div> 
        <div id="js" class="content" contenteditable></div> 
       </td> 
       <td> 
        <div class="tag">Output</div> 
        <iframe id="output">Hello</iframe> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html> 

Как создать образец редактора codemirror? Спасибо.

ответ

0

Предполагается, что вы должны определить myTextarea в своем экземпляре codemirror. Просто включите в ваш HTML файл, как это textarea,

<textarea id="myCode"></textarea> 

Теперь определим myTextarea, как это,

var myTextarea = document.getElementById("myCode"); 

Таким образом, наконец, ваш файл будет выглядеть следующим образом,

<body> 
    <textarea id="myCode"></textarea> 

    <script type="text/javascript"> 
     window.onload = function() { 
     var myTextarea = document.getElementById("myCode"); 
     editor = CodeMirror.fromTextArea(myTextarea, { 
      lineNumbers: true 
     }); 
     }; 
    </script> 
</body> 

Здесь является рабочей скрипкой http://jsfiddle.net/dsaket/tqL7z213/1/.

Кроме того, для дальнейших запросов вы должны проверить демонстрационные файлы, предоставленные codemirror.

+0

Превосходно !. Спасибо :) – dev777

Смежные вопросы