简要揭秘在线代码编辑器

前言

好像园里没啥帖子介绍在线代码编辑器,网上也多少相关资料,我做在线代码编辑器http://www.wcodei.com/的时候走了一堆的弯路,现在分享一下经验吧,我记性很差,就只能想到哪儿写到哪儿了,希望大家别介意。

一.所见即所得编辑器与代码编辑器的技术对比

两者看上去貌似很相似,都不是传统的editarea,都需要编辑器中显示的内容能够支持带颜色。

所见即所得编辑器的技术核心就是contenteditable="true"属性,只要在一个html容器中使用该属性,则该html容器就能变成一个简单的编辑器,现在常见的一些所见即所得编辑器都是在这个技术的基础上再加上一些控制编辑器内容的代码而已。而代码编辑器则不能采用该技术,因为这样在编辑html代码时会造成混淆。所以常见的在线代码编辑器一般是弄一个隐藏的editarea来支持键盘输入,将编辑的内容存储在js对象中,然后再动态的创建html对象来展示着色的代码。

这样看来代码编辑器相对于所见即所得编辑器来说,还是更有难度一些的。

特别对我这种页面布局方面比较抓瞎的人来说,在线代码编辑器无比的烦人。。。到现在都还有隐现的页面展示bug。

二.代码编辑器的一些功能实现

1.光标

代码编辑器需要自己实现光标的闪烁效果,这个很简单,就是间隔一段时间显示/隐藏div就行啦。

setInterval(function() {
        tCursor.toggle();
      }, 530);

当然光标的位置需要自己计算。

2.滚动条

滚动条实现的难易要看你想要怎样的功能,如果你不需要行号,或者不需要固定行号,则用html对象自带的滚动条就行了。

如果你和我一样想实现固定位置的行号,这就麻烦一些,需要自己实现滚动条的效果,并自己用代码来同步滚动条的状态和页面的scroll状态。

3.着色

个人感觉着色不是那么复杂,主要就是把一些需要着色的东东找出来就行了。

4.拷贝,剪切等

实现这个比较复杂的一点是ie不支持直接访问剪贴板,这样就只能曲线救国了,先把要拷贝,剪切的内容放到editarea里面,再弄到剪贴板里去。

5.打开本地文件

其实我本来想实现一种比较酷炫的功能,本地文件直接拖动到编辑器打开,然后快捷键ctrl-s保存文件。不过到实现的时候却发现拖动打开可以,但是保存文件不行,因为我找了一圈都没找到怎么获取被拖动打开文件的文件地址,就算用插件也貌似得不到。顶多得到文件名,具体地址得不到!

于是我只能做成那种通过插件浏览我的电脑来一步步打开文件,并进行保存的方式了。

三、演示

我挺喜欢vs的在没有选择文本的时候用ctrl-x,ctrl-c会剪切复制当前行的功能

和ultraedit的列编辑模式(用ctrl-m切换),所以在我的编辑器中也实现了这两个功能。

另外这个版本因为要访问本地文件,所以需要装插件,囧!

http://www.wcodei.com/

时间: 2024-07-29 18:04:49

简要揭秘在线代码编辑器的相关文章

多语言在线代码编辑器,可运行程序

在线代码编辑器,网址:http://www.mcqyy.com/RunCode/c/ 可支持的语言有: php5.3.php5.4.php5.6.php7.python2.7.python3.C#.java.shell.c语言.c++.go.lua.perl.ruby.nodejs.Objective-C.erlang.rust.R语言.scala.haskell.D语言 如下图: 也可以在首页上找到链接,首先打开首页http://www.mcqyy.com/,然后在页面的最下面的“实用工具”中

20个最强的基于浏览器的在线代码编辑器

20个最强的基于浏览器的在线代码编辑器,你听过或者用过吗? 1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabblet 跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题.为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧.于是,jsFiddle.JSBin等前端代码的在线测试工具应

在线代码编辑器CodeMirror简介

1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便.如果想看效果图,可移步到这里----CodeOnline,这是我做的一个小项目,其中代码编辑器的就是用Code Mirror实现的. 2.使用Code Mirror 下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器,并对其常

在线代码编辑器 CODEMIRROR 配置说明

转自:http://www.hyjiacan.com/codemirror-config/ CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支持语言的语法定义,theme目录下是支持的主题样式.一般在开发中,添加lib下的引用和mode下的引用就够了. 使用示例 首先,要引用是 lib 目录下的 codemirror.js,还有一个就是同目录下的c

在线代码编辑器---codemirror插件

1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. instance是一个当前的codemirror对象,changeObj是一个{from,to,text[,removed][,origin]}对象.其中from,to分别表示起始行对象和结束行对象,行对象包括ch:改变位置距离行头的间隔字符,line:改变的行数.text是一个字符串数组表示被修改的

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.2.5+ mybaits3.3  SSM 普通java we

java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

CodeMirror:基于JavaScript的代码编辑器

官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionalit

[HTML5]网页代码编辑器

本文介绍18款极具价值的网页代码编辑器.过两天筹备好了开始我的那个小项目,其中要用到下面的东东,觉得特别不错,特此记录下! 1.Codeanywhere Codeanywhere是运行在浏览器上的代码编辑器,内嵌一个强大的FTP客户端.目前支持多数流行的网页格式(HTML.PHP.JavaScript.CSS和XML). Codeanywhere支持编辑多种类型的文件,集成了桌面编辑器中所有好的特征:高亮显示语法.自动填充代码.智能缩进.支持无限次的撤销和重做.无数个tabs. 2.CodeRu