在线代码编辑器的实现原理与思路探讨？

阳光穿透心脏的1/2处 2022-07-13 14:49 231阅读 0赞

在线代码编辑器   
    在线编辑各种文本形式的源代码，如js,html,php等，要支持语法高亮，即时输入即时高亮。   
  
我的初步想法是用一个 <div contenteditable></div> 来实现，就是类似于常见的在线网页编辑器，但是因为仅仅是需要代码编辑，所以，要控制只能输入文本，不能让用户插入图片啊链接啊等等东西，感觉比较难。   
  
希望大家能够探讨一下如何实现。   
  
Bespin是一个用Canvas实现的在线代码编辑器，所以不支持IE，而且，因为是Canvas模拟编辑，效率很低，反应迟钝。   
https://bespin.mozilla.com/   
![webkit-editor-medium.png][]

--------------------

**问题补充：**

kjah 写道

以前做过这方面预研,可以参考下我预研报告:   
http://kjah.iteye.com/blog/424624   
记得实现比较好的是 codepress   
  
js干这活效率上差很多,由于这个原因实际项目中没有采用js,还是用的ActiveX

看了你的文章。感觉codepress就是我所需要的。   
但我这里访问不了 http://codepress.org/

--------------------

**问题补充：**查找旧文档，发现以前就找到过一个和我需要的功能基本一致的程序。   
这个也是在sourceforge开源的，叫做gmeditor ecoder，我的csdn博客之前还有记录过，没想到竟忘记了。   
  
很赞的在线的代码编辑器，支持多种语言彩色语法编辑，罕见精品   
http://blog.csdn.net/cuixiping/archive/2009/10/16/4678840.aspx   
  
网址：   
http://ecoder.gmeditor.com/   
http://sourceforge.net/projects/ecoder/   
  
我看了看，它的实现原理是用一个透明的<textarea>做编辑区，在<textarea>底下用一个<div>来放彩色高亮代码，比较巧妙的解决了<textarea>便于输入却不便于着色、而<div>便于着色却不便于输入的矛盾。   
但是有一点点问题，字体会有重影，因为div里的字和textarea里的字并非总能完全重合的，选中一段代码时更明显。   
  
![encoder.gmeditor.jpg][]

--------------------

**问题补充：**补充一个处理高亮的js库：   
SyntaxHighlighter   
http://code.google.com/p/syntaxhighlighter/   
http://www.dreamprojections.com/SyntaxHighlighter/   
SyntaxHighlighter是一个利用Javascript和CSS在客户端高亮显示代码的小工具，用法非常简单，引入相应的CSS和JS文件，然后将代码放到一个TextArea....

--------------------

**问题补充：**再补充一个在javaeye发现的强大的js语法高亮库：JSSC   
  
JSSC 3 rc（js语法高亮器 ver3 rc）&& JSSC 2.2 发布:   
http://www.iteye.com/topic/189502   
  
时隔很久了，JSSC4 beta版终于亮相……   
http://www.iteye.com/topic/291314   
  
jssc ver5.0 alpha   
http://www.iteye.com/topic/459788   
  
关于jssc的项目主页以及之前的老版本或者想使用它的，请看这里：   
  
http://code.google.com/p/jssc/   
http://jssc.googlecode.com/

--------------------

**问题补充：**

kjah 写道

又找到一个更好的   
http://www.open-open.com/ajax/ajax20080713173520.htm   
试用了一下感觉不错

果然强大，你怎么找到的啊？   
不过这个示例网址我这里打不开，去sourceforge看看。   
  
EditArea   
  
EditArea是一个javascript源代码编辑器。支持：文本格式化，搜索与替换，实时语法着色加亮。当前支持的语言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf\*ck。   
![EditArea.jpg][]   
  
主页:http://www.cdolivet.net/editarea/   
  
下载:http://sourceforge.net/project/showfiles.php?group\_id=164008   
  
示例:http://www.cdolivet.net/editarea/editarea/exemples/exemple\_full.html

--------------------

**问题补充：**另外发现了一款在线编辑php的，名叫phpAnyWhere，看介绍应该是很强大的，但是由于必须要先有ftp服务器账号，而我填好真实有效的ftp后还是一直提示“Unable to connect to server!”郁闷，也就没能进到里面的编辑界面了。   
  
网址：  [http://phpanywhere.net/][http_phpanywhere.net]   
  
![editor.jpg][]   
  
PHPanywhere Overview   
  
PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online.   
  
It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.   
  
  
All your projects - Anywhere!   
Because it works in a browser (\*) you can start coding right away, no need for installing anything.   
Best of all you can work from anywhere, all you need is an internet connection and a web browser and you’re ready to go!   
  
Develop and maintain multiple projects with ease using PHPanywhere, because as soon as you log in all your projects (FTP servers) are immediately accessible. PHPanywhere even remembers what files you were working on and reopens them as well.   
  
  
Real-time syntax code editor   
The real-time syntax code editor is really what PHPanywhere is all about, so here is a list of just some of the things it does:   
  
•Syntax highlighting   
•Smart indentation for each language   
•Code folding   
•Full internationalization   
•Unlimited undo/redo (now handled on client (browser) side, no more waiting for server response)   
•Unlimited tabs   
•Find and replace feature (New Feature)   
•Displays line numbers (New Feature)   
•Code auto completion, snippets (New Feature)   
•Displays line numbers (New Feature)   
•Code indention (TAB key) (New Feature)

--------------------

**问题补充：**kjah 提到的这个editarea （http://sourceforge.net/projects/editarea/）   
和 gmeditor ecoder（http://sourceforge.net/projects/ecoder/）比较相似了，都是通过透明textarea遮盖div来实现效果。

[webkit-editor-medium.png]: /images/20220713/40373b40a96143d5a72899a32d00113f.png
[encoder.gmeditor.jpg]: /images/20220713/ee57a7d60311443382ea3d4693d8cd54.png
[EditArea.jpg]: /images/20220713/a0539509ec1a4271907c1c5361f4cbcd.png
[http_phpanywhere.net]: http://phpanywhere.net/
[editor.jpg]: /images/20220713/5face36ac5bf492db9b6edd2ae912241.png