基础版在线演示已经放出
http://inedit.googlecode.com/svn/trunk/demo/demo.html
=====更新日志
=====
2008.12.18
改进了在FF只有一行数据情况下的BUG,当只有一行数据的时候自动添加空行以避免此BUG的发生.
===============
WYSIWYG WEB编辑器太多了。而且很多都很流行,功能也够强大。
可我还是要重新写一个,因为我发现:
- 改造问题
:如果要改造他们太难了,首先就是要很多的时间来理解作者的思路,然后要清晰的明白代码间的逻辑关系。好,我不怕麻烦,学习吧,可问题来了,这次改造完了,过了几个月,发现还有要改造的地方,还要重新的来一遍这个过程,怎么记不住?当然,作者的思路不是我的思路,或者说常常跟我的思考方式都是不同的,我真的是记不住。做笔记?成本太高了吧,又要做多详细的程度呢?
- 太长等待
:几乎所有的编辑器都是用的 iframe 方式另外包裹一个页面来完成的,到目前为止我仅仅发现 nicEdit 是 inline 式的,也就是利用 Element 的 contentEditable 属性为 true 来达到 WYSIWYG 的编辑目的。可是这个编辑器目前还不稳定,仍然有一些BUG没有处理,而作者自己的时间也不是很富裕,所以更新很慢。我等不了 nicEdit 了。其他的iframe的更不用说了,别指望作者按你的需求去设计。
- 策略方面
:为什么要用 inline 式的,而不用 iframe 方式?成本,制作好一个工具不管用多少时间费多少脑子,一旦完成,就可以快速的反复使用,所谓:工欲善其事,比先利其器
。inline 式比iframe方式的编辑器有一个减少成本的巨大优势:不用写两套页面了,一套浏览,一套编辑。一个好的 inline 式编辑器可以直接在浏览页面进行编辑,只要规划好向后台提交更新的代码,一个页面就可以兼顾两个功能,这无疑是提高了工作效率,减少了开发成本。因此一个好的 inline 式编辑器是很有实用价值的。
- 技术方面
:作为一个程序员,不要重复
造
轮子这句话真正的意思是不要造的是和别人造的一样的轮子才对(当然指的是技术选型并同样的功能)。因此我们需要尝试不同的方法去不停的造轮子。这样技术才能提高。程序员就是轮子工.对于这次的 inEdit 来说,inEdit 采用了与其他 javascript 常见技术完全不同的技术方法。我们知道 javascript 是面向对象的语言。但是大多数人认为的 OOP 就是要用 class 编程的方法,要用 new .这是很狭义的认识。OOP 绝对不是什么固定的代码格式所能定义的。对于 javascript 这样一个奇特的 OO 语言来说,更是可以充分的体现这一点:javascript 里根本就没有 class 这个概念,就算用 prototype ,原型编程
的方法也和其他语言 c++/java 的 new class 方式也是完全不同的两个概念。因此这一次我要用实作来还原 javascript OOP 的风格
。我把这种方法称为 Mixin
,混入
。Mixin 这个概念在别的语言里也有,我这里是借用了这个概念,不过 javascript 里的 Mixin 和他们不同,但是从方法上说也可以称之为 Mixin.在 Mixin 方式下,完全抛弃了
原型编程
的方法,甚至排斥不兼容它。
- 独立工具集合
:其实对于编程来说早就有这么一种理念:一段代码(函数,对象,库组件)应该只负责一件事情,这段代码应该独立简洁,并且有和其他代码融合使用的可能性
。传说中的小而美丽
.我们现在看到的很多库或者框架都是大而全,而且可组合性不高(当然有些组合是根本不必要的),相关性太高,鲁棒性太低。比如我们常见的javascript框架中都有each这种遍历对象并回调的函数实现,我问:
通常这种实现
1.传入对象可以是array 或 object,能是 function 么?
2.能灵活处理传入的对象类似 jQuery的实例对象(含有length成员且含有对应的以字符形式保存的数值作为 key 的成员)么?
3.能在回调函数里直接体现出是否是第一个成员,最后一个成员,奇数或偶数成员么?
不能
但是这些
功能真的很实用
不能传入 function 是因为就是 function 对象下定义了成员,但是不能通过 length 这属性来访问,因为function的length表示function的参数个数,就算不用length属性,直接遍历所有的成员,但是却又和上面的第2条有冲突,
第2条问题,其实是一个简化的访问操作,但是这个操作可能在某些代码里使用度很高,实现这个确很简单加入一个参数就行了
第3条就是更实用的功能了,比如我们要对表格的奇数行加一个不同的底色的话,方便的奇偶判断会使代码很简洁,同理要在弹出菜单中的每一行下加一条底边框,但是最后一个就不能加了,因为往往
弹出菜单的外围就定义了一个边框了,那判断最后一条就是很实用的了。所以要好轮子么?自己造吧!
还有就是从发展的角度考虑,很多早期的库,代码都有历史落后性,毕竟随着时间,需求和理念都在变,不同时期和环境是一定会有对应的代码理念的。这是发展的观点了。发展就靠我们自己来动手了
。
inEdit等基础版稳定后,稍后放出代码.届时会有相应的文章来说明我使用的具体方法。
先贴出我的each函数
:这个函数是某个基础对象的一部分
/*遍历对象,回调fun的参数:(v,k,['first','even','odd','lasteven','lastodd'])*/
each:function(obj,fun,bylength){
if(!fun && typeof obj=='function'){
var fn=obj,a=this;
}else{
var fn=fun,a=obj;
}
var ret=0,odd=false;
if(a instanceof Array)
for (var i=0;i<a.length;i++){
odd=!odd;
var even=odd?'even':'odd';
var at=i==0?'first':i==a.length-1?'last'+even:even;
if(false===fn(a[i],i,at)) break;
}
else if (typeof a == 'object')
if(bylength)
for (var i=0;i<a.length;i++){
odd=!odd;
var even=odd?'even':'odd';
var at=i==0?'first':i==a.length-1?'last'+even:even;
if(false===fn(a[i],i,at)) break;
}
else{
var index=-1,j=0;
for (var i in a) index++;
for (var i in a){
odd=!odd;
var even=odd?'even':'odd';
var at=i==0?'first':j==index?'last'+even:even;
j++;
if(false===fn(a[i],i,at)) break;
}
}
else if (typeof a == 'function' && a.len)
for (var i=0;i<a.len;i++){
odd=!odd;
var even=odd?'even':'odd';
var at=i==0?'first':i==a.len-1?'last'+even:even;
if(false===fn(a['0'+i],i,at)) break;
}
return this;
}
分享到:
相关推荐
压缩包中的“inEdit.swf”文件很可能是一个Flash应用程序,这在早期的Web编辑器中很常见。SWF是Adobe Flash Player支持的文件格式,用于展示交互式内容,如动画和应用程序。因此,这个“inEdit.swf”可能是WYSIWYG...
【标题】:“一个简单和快速的WYSIWYG编辑器” 在Web开发中,WYSIWYG(What You See Is What You Get)编辑器是一种让用户能够像在桌面文本处理软件中那样直观地编辑内容的工具。它使得非技术人员也能轻松创建和...
通常,一个完整的富文本编辑器会包含JavaScript库、CSS样式表、图像资源等文件,可能还会有示例代码、文档或配置文件等。如果这个“wysiwyg”是一个文件夹,那么打开后应该能看到这些组成部分。 在实际使用时,...
**WYSIWYG Web Builder ...总的来说,WYSIWYG Web Builder 11汉化版是一个强大的网页制作工具,尤其适合初学者和对编程不熟悉的人群。通过它,用户可以快速创建出美观且功能丰富的网站,而无需深入学习复杂的编程语言。
本资源集合包含了15种不同的WEB编辑器,为用户提供多样化的选择,满足不同层次和需求的网页设计工作。 首先,我们要了解WEB编辑器的基本类型。常见的有所见即所得(WYSIWYG)编辑器和源代码编辑器。所见即所得编辑...
2. **初始化**:在HTML中指定一个div元素作为编辑区域,通过JavaScript调用编辑器的初始化函数,绑定到该div上。 3. **配置**:根据需求,可以配置编辑器的参数,比如开启或关闭某些功能,设置默认样式等。 4. **...
TinyMCE是一个面向Web平台的基于JavaScript开发的即见即所得(WYSIWYG)的HTML编辑器。它可以将Textarea或其他HTML标记转换为编辑器界面,使用起来非常方便。 4. jwysiwyg jwysiwyg是一个基于jQuery的WYSIWYG插件...
另一文件名为"ckeditor",这很可能是指CKEditor,一个知名的开源在线Web编辑器。CKEditor提供了丰富的API和插件系统,允许开发者对其进行深度定制,例如添加新的功能、改变默认样式等。CKEditor因其强大的功能和灵活...
富文本编辑器(WYSIWYG)是一种在线文本编辑工具,允许用户以类似于常见桌面文字处理软件(如Microsoft Word)的方式创建和编辑内容,而所见即所得(What You See Is What You Get)。这种编辑器在网页应用中非常...
在IT行业中,Web编辑器是开发网页和管理网站内容不可或缺的工具。PHP Web编辑器尤其受到欢迎,因为它们提供了一种方便的方式,让非技术用户也能通过浏览器进行文本编辑和格式化,而无需掌握HTML代码。以下是关于标题...
在Web开发领域,一个优秀的Web编辑器是必不可少的工具,尤其对于内容创作者和开发者来说,它极大地提高了工作效率和用户体验。本文将深入探讨Web编辑器的开发,包括其核心功能、技术实现、设计原则以及常见的开发...
Web编辑器是一种在网页上实现文本编辑功能的交互式组件,它使得用户可以在浏览器环境中进行文字处理,类似于桌面应用程序中的Word。本知识点将详细介绍“web编辑器控件”,特别是基于DLL(动态链接库)实现的组件,...
总的来说,HTML在线编辑器 v2.0 WYSIWYG汉化版是一个为中文用户量身定制的,能够在各种浏览器环境下使用的网页内容创作工具。它简化了HTML代码的编写过程,让内容创作者能够更加专注于内容的创作,而不是技术细节。...
总之,"xwiki-2.7-web-wysiwyg-src"是探索XWiki WYSIWYG编辑器的起点,它包含的源代码揭示了编辑器的实现细节,为开发者提供了一个深入了解和定制这一关键组件的平台。无论是为了提升项目效率还是深化技术理解,这份...
"一个基于ASP.NET实现的WYSIWYG Editors文档编辑器控件源码例子"这一标题表明这是一个教学资源或示例代码,它展示了如何在ASP.NET环境中创建或集成一个WYSIWYG编辑器。开发者可以借此学习如何为自己的Web应用添加...
Mobiledoc是一个轻量级的数据结构,用于在Web应用程序中表示富文本内容,特别是用于创建“所见即所得”(WYSIWYG)编辑器。它由Bustle开源,目的是提供一个可扩展且可移植的编辑器解决方案,能够处理复杂的格式化和...
7. **协作与版本控制**:为了团队协作,一些Web编辑器整合了版本控制功能,如Git,让团队成员可以共同编辑同一个项目,跟踪更改历史,避免冲突。 8. **安全性**:在使用Web编辑器时,确保网站安全至关重要。编辑器...
【WYSIWYG_Web_Builder_v6.1.1_Portable】是一个便捷的网页制作工具,专为那些不熟悉编程语言但希望快速创建专业网页的用户设计。"WYSIWYG"是英文"What You See Is What You Get"的缩写,意味着用户在编辑界面看到的...
在现代Web应用中,用户有时需要在网页上编辑文本并进行打印操作,这通常涉及到前端技术中的富文本编辑器和打印功能。...通过不断优化,我们可以创建一个既易于使用又功能强大的web打印编辑器,满足各种用户需求。
一个优秀的Web HTML编辑器应该具备以下关键特性: 1. **所见即所得(WYSIWYG)编辑**:这种编辑模式让用户可以直接在界面上操作,就像使用Word那样,看到的内容就是最终网页的样子。WizHtmlEditor.exe可能就提供了...