I have a problem that seems simple but I fear that it is too complicated for just myself to implement. I'm trying to implement a textarea into a webpage where a user can write html code, press a button, and the interpreted html page shows up in a div next to the code. Very similar to w3schools "try it" sections.
我有一个看起来很简单的问题,但我担心它太复杂了,我一个人无法解决。我试图在网页中实现一个文本区域,用户可以在其中编写html代码,按下按钮,解释后的html页面会出现在代码旁边的div中。非常类似于w3schools的“try it”部分。
So far, I have everything implemented, and it works almost as intended, the code renders properly in the right place when you press a button. The next step is to implement syntax highlighting in the textarea such that it will recolor the text based on what tag or attribute is typed. Basically, I'd like the behavior to be exactly like what notepad++ does when you write html code. text turns blue, attribute="" text turns red, etc.
到目前为止,我已经实现了所有功能,并且它几乎按照预期工作,当您按下一个按钮时,代码将在正确的位置显示。下一步是在textarea中实现语法高亮显示,这样它将根据输入的标签或属性重新着色文本。基本上,我希望这种行为与编写html代码时记事本++ +的行为完全相同。文本变为蓝色,属性=""文本变为红色,等等。
My thinking is that I need to somehow read what's in the textarea word by word, test against all possible tag and attribute names, and repopulate the textarea with colored text. From what I've seen, I don't think this is possible with a traditional textarea, and I might have to implement a specialized applet in place of the textarea. Does anyone know what the least painful way of accomplishing this would be? I'm a computer science major just about to complete my degree, but my knowledge of web programming is very limited and I've only started delving into jquery and jsp, though I have a good amount of experience with HTML/CSS/Javascript.
我的想法是,我需要以某种方式逐字读取textarea中的内容,针对所有可能的标记和属性名进行测试,然后用有颜色的文本重新填充textarea。从我所看到的情况来看,我认为这对于传统的textarea来说是不可能的,我可能需要实现一个专门的applet来代替textarea。有人知道最不痛苦的方法是什么吗?我是一名计算机科学专业的学生,即将完成我的学位,但是我的web编程知识非常有限,我只是开始研究jquery和jsp,尽管我在HTML/CSS/Javascript方面有丰富的经验。
1 个解决方案
#1
4
I had a similar requirement in the past. I found an awesome Javascript-based code editor that you can embed in your web-application.
我过去也有过类似的要求。我发现了一个很棒的基于javascript的代码编辑器,可以嵌入到web应用程序中。
Click here to view the demo: Code Mirror HTML editor demo
点击这里查看演示:代码镜像HTML编辑器演示
Click here to download Code Mirror: Code Mirror home/download
点击这里下载代码镜像:代码镜像主页/下载
User Manual: Code Mirror user-manual
用户手册:代码镜像用户手册
The editor supports syntax-highlighting, automatic indentation, intellisence auto suggestion, etc.
编辑器支持语法高亮、自动缩进、intellisence自动提示等。
Using it is as simple as importing the script:
使用它就像导入脚本一样简单:
<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">
And replacing the text-area with the code-mirror editor:
用代码镜像编辑器替换文本区域:
var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});
If you are using JQuery, you can do it like this:
如果你使用JQuery,你可以这样做:
var myCodeMirror = CodeMirror(function(elt) {
$('#my-code-input').replaceWith(elt);
}, {value: $('#my-code-input').val()});
#1
4
I had a similar requirement in the past. I found an awesome Javascript-based code editor that you can embed in your web-application.
我过去也有过类似的要求。我发现了一个很棒的基于javascript的代码编辑器,可以嵌入到web应用程序中。
Click here to view the demo: Code Mirror HTML editor demo
点击这里查看演示:代码镜像HTML编辑器演示
Click here to download Code Mirror: Code Mirror home/download
点击这里下载代码镜像:代码镜像主页/下载
User Manual: Code Mirror user-manual
用户手册:代码镜像用户手册
The editor supports syntax-highlighting, automatic indentation, intellisence auto suggestion, etc.
编辑器支持语法高亮、自动缩进、intellisence自动提示等。
Using it is as simple as importing the script:
使用它就像导入脚本一样简单:
<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">
And replacing the text-area with the code-mirror editor:
用代码镜像编辑器替换文本区域:
var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});
If you are using JQuery, you can do it like this:
如果你使用JQuery,你可以这样做:
var myCodeMirror = CodeMirror(function(elt) {
$('#my-code-input').replaceWith(elt);
}, {value: $('#my-code-input').val()});