codemirror 표시 코드 from codemirror textarea

codemirror textarea에서 코드를 표시하는 동안 일반 텍스트가 표시되며 강조 표시되는 형식의 코드로 표시하려고합니다. 모든 PLZ 도와주세요. 그것은 매우 분명하지 않다 때문에codemirror 표시 코드 from codemirror textarea

이

<!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>

출처

2017-02-23 Satya Pendem

(확실하지 않음이 질문에 대답하는 경우 :

나는 editor.getValue();를 사용하여 내가 codemirror 편집기에서 해당 코드를 받고있어 codemirror 편집기에서 강조되었다 강조 코드를 인쇄 할 - 질문에 필요한 코드 만 제공하면 도움이됩니다.

각 모드 (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

을

출처

2018-01-26 07:18:11 ztrat4dkyle

codemirror 표시 코드 from codemirror textarea

답변

관련 문제