文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用W3Schools.com创建类似于jQuery的在线HTML源代码编辑器？

问如何使用W3Schools.com创建类似于jQuery的在线HTML源代码编辑器？
EN

Stack Overflow用户

提问于 2018-09-24 06:18:04

回答 1查看 2.8K关注 0票数 3

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

我尝试使用jQuery语法突出显示的工作，如下所示

它的工作原理很完美，但是当我尝试编辑它时，它并不总是响应大型代码。我的HTML代码超过12000到15000行，所以它没有用。

我想创建如下所示的W3Schools

我怎么能像上面那样创造呢？

请告诉我任何想法。

建议任何插件来创建它。

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-24 07:35:40

我拿到了安斯瓦尔

现在它的响应是伟大的，我尝试了超过100000行html &它的工作很棒。

我将插件从JQuery语法突出显示更改为。

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

步骤1:从CodeMirror下载Jquery-代码镜像-插件

步骤2:解压缩插件文件&将解压缩文件夹添加到解决方案中

步骤3:添加以下引用

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

步骤4:使用类<textarea>在html中添加codemirror-textarea，如下所示

<!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
    });
});

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52473613

复制

相似问题

问如何使用W3Schools.com创建类似于jQuery的在线HTML源代码编辑器？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用W3Schools.com创建类似于jQuery的在线HTML源代码编辑器？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用W3Schools.com创建类似于jQuery的在线HTML源代码编辑器？
EN