Question

我有一个看似简单的问题，但我担心这对我自己来说太复杂了。我正在尝试将textarea实现到一个网页，用户可以在其中编写HTML代码，按下按钮，解释的html页面显示在代码旁边的div中。与w3schools“试试”部分非常相似。

到目前为止，我已经实现了所有功能，并且它几乎按预期工作，当您按下按钮时，代码可以正确地呈现在正确的位置。下一步是在textarea中实现语法突出显示，以便根据键入的标记或属性重新着色文本。基本上，我希望这个行为与编写HTML代码时的notepad ++完全一样。文本变为蓝色，属性=“”文本变为红色等

我的想法是，我需要以某种方式逐字阅读textarea中的内容，针对所有可能的标记和属性名称进行测试，并使用彩色文本重新填充textarea。从我所看到的情况来看，我认为传统的textarea不可能实现这一点，而且我可能不得不实现一个专门的applet代替textarea。有谁知道实现这一目标的最不痛苦的方法是什么？我是一名即将完成学位的计算机科学专业，但我对网络编程的了解非常有限，我只是开始深入研究jquery和jsp，尽管我对HTML / CSS / Javascript有很多经验。

Answer 1

我过去也有类似的要求。我找到了一个很棒的基于Javascript的代码编辑器，可以嵌入到你的web应用程序中。

点击此处观看演示：Code Mirror HTML editor demo

点击此处下载代码镜像：Code Mirror home/download

用户手册：Code Mirror user-manual

编辑器支持语法高亮，自动缩进，智能自动建议等。

使用它就像导入脚本一样简单：

<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">

用代码镜像编辑器替换文本区域：

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

如果您使用的是JQuery，可以这样做：

var myCodeMirror = CodeMirror(function(elt) {
    $('#my-code-input').replaceWith(elt);
}, {value: $('#my-code-input').val()});

将HTML语法高亮显示到textarea中以编写代码

1 个答案: