Question

我想创建HTML源代码编辑器，例如W3Schools

我已经尝试过使用 JQuery语法Highlight 跟踪

它的工作原理很完美，但是当我尝试对其进行编辑时，它始终无法响应大型代码，我的html代码超过12000至15000行，因此它没有用

我想像W3Schools这样创建

如何像上面一样创建

请给我任何想法

建议使用任何插件创建

Answer 1

我收到了Answare

现在它的响应很好，我尝试了超过100000行html，并且效果很好

我将插件从 JQuery语法Highlight 更改为 jquery-codemirror

按照以下步骤设置代码镜像

步骤1：从Jquery-CodeMirror-Plugin

下载CodeMirror

第2步：解压缩插件文件，并将解压缩后的文件夹添加到您的解决方案中

第3步：添加以下引用

plugin/codemirror/lib/codemirror.css
plugin/codemirror/lib/codemirror.js

步骤4：将<textarea>中的html添加到类codemirror-textarea上

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CodeMirror</title>
        <link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">
    </head>
    <body>
        <textarea class="codemirror-textarea"></textarea>

        <!-- javascript -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
        <script type="text/javascript" src="js/default.js"></script>
    </body>
</html>

第5步：在JS中添加以下代码

jQuery

$(document).ready(function(){
    //code here...
    var code = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(code, {
        lineNumbers : true
    });
});

使用JQuery创建HTML源代码编辑器（如W3Schools）

1 个答案: