2017-02-23 4 views
0

Я получаю обычный текст при отображении кода из текстового поля codemirror, и я хочу, чтобы это было в виде выделенного кода. Любой плз мне поможет.Codemirror код отображения из codemirror textarea

Я хочу напечатать выделенный код, который был выделен в редакторе CodeMirror я получаю этот код из редактора CodeMirror с помощью editor.getValue();:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo_Format</title> 
     <link rel="stylesheet" href="lib/codemirror.css"> 
     <script src="lib/codemirror.js"></script> 
     <script src="lib/util/formatting.js"></script> 
     <script src="lib/css.js"></script> 
     <script src="lib/xml.js"></script> 
     <script src="lib/javascript.js"></script> 
     <script src="lib/htmlmixed.js"></script> 
     <link rel="stylesheet" href="lib/docs.css"> 

     <style type="text/css"> 
      .CodeMirror { 
       border: 1px solid #eee; 
      } 

      td { 
       padding-right: 20px; 
      } 
     </style> 
    </head> 
    <body> 
     <h1></h1> 

     <form> 
      <textarea id="code" name="code"> 
       package org;import java.io.IOException;import javax.servlet.http.*;@SuppressWarnings("serial") 
       public class BasicChatServlet extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse resp) 
       throws IOException{resp.setContentType("text/plain");resp.getWriter().println("Hello, world");}} 
      </textarea> 

     </form> 

     <table> 
      <tr> 
       <td> 
        <a href="javascript:autoFormatSelection()"> 
         <button> Format </button> 
        </a>&nbsp;&nbsp;&nbsp; 
        <button id="copy_button">copy</button> 
        <button id="show">show</button> 
       </td> 
       <div id="code_show"> 

       </div> 
      </tr> 
     </table> 
     </p> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script> 
      $("#copy_button").click(function(){ 
      $("textarea").select(); 
      document.execCommand('copy'); 
      }); 

      var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
      lineNumbers: false, 
      indentUnit: 4 

      }); 
      CodeMirror.commands["selectAll"](editor); 
      function getSelectedRange() { 
      return { from: editor.getCursor(true), to: editor.getCursor(false) }; 
      } 
      function autoFormatSelection() { 
      var range = getSelectedRange(); 
      var x=editor.autoFormatRange(range.from, range.to); 

      } 
      $("#show").click(function(){ 
      var program=editor.getValue(); 
      $("#code_show").text(program); 
      }); 
     </script> 
    </body> 
</html> 

ответ

0

(Не уверен, если это отвечает на ваш вопрос, потому что это не очень понятно, - было бы полезно, если бы вы предоставили только необходимый код для вопроса)

Каждый режим (который стилирует ваш экземпляр CodeMirror) живет в подкаталоге каталога mode/ и обычно определяет один файл JavaScript, который реализует режим , Загрузка такого файла будет сделать язык доступным для CodeMirror через mode option, который вы заявляете при создании экземпляра CodeMirror:

CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: false, 
    indentUnit: 4, 
    mode: 'text/css' 
}); 

Вы должны будете обеспечить ваши different mode files добавляются в папку режима в вашей библиотеке. В вашем случае файлы css.js, xml.js, javascript.js и htmlmixed.js должны быть в новой папке с именем lib/mode (поэтому у css.js есть путь к файлу lib/mode/css.js, например).

Вы можете проверить демонстрацию каждого режима, чтобы увидеть, какую строку вы должны передать в опцию mode:, чтобы она вызывалась. Вот css demo for example

Вы можете сделать еще один шаг и изменить режим на лету для редактирования нескольких текстовых файлов-типов: Multiple modes Codemirror