Question

我在显示codemirror textarea的代码时得到纯文本，我想以代码突出显示格式的形式。任何PLZ帮助我。

我想打印在代码镜像编辑器中突出显示的突出显示的代码我使用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>

Answer 1

（不确定这是否能回答您的问题，因为它不是很清楚 - 如果您只为问题提供必要的代码会有所帮助）

每种模式（CodeMirror实例的样式）都位于mode/目录的子目录中，通常定义一个实现该模式的JavaScript文件。加载此类文件将通过mode option使CodeMirror可以使用该语言，您在创建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

codemirror显示来自codemirror textarea

1 个答案: