[nicEdit专题]初识 nicEdit

初次认识 nicEdit
是一个偶然。 (下面简称nicEdit为nE）
我正为所见即所得编辑器不能方便的满足我的需求郁闷，而手工写插件的方式又和我的需求不配套的时候，在JE的新闻 9个最好的Rich Text编辑器
里第一个就是她了。
虽然 withyou 说

引用

NicEdit 这是一个发布不久的编辑器，有些复杂，整个文件大小超过200KB，它集成了许多标准的编辑器功能，它很容易整合和使用。

不过在我看过 nE 的演示的时候我发现这正式我需要的 inline web editor .
下载， 粗略的试用了一下，我真的喜欢上 nE 了。
她的代码结构很好，而且感觉上一点也不复杂，反而是简单的很。
简单的我顺手就做了按钮的汉化和扩展了一个valueEvent,
原来nicEdit对于Event的处理是没有返回值的，而我需要一个返回值的事件，所以就扩展了一个，而且实际的使用了一下，运行完全符合我的设想。 这一切化了不到半天的时间。
扩展如此的方便，说她 有些复杂 显然不合适，应该说 易扩充 , 很安逸 。

但是对于我随手写的代码是否符合作者的整体思路呢？

那就研读一下她的代码，窥探一下作者的思路吧。
看看nE的源代码目录 。

组织的很好，一看就知道，
第一步要看的是 nicCore 目录。

发现 bkLib 是一切的开端，就从她看起吧！

先看看她的第一个函数: bkExtend

var bkExtend = function(){
	var args = arguments;
	if (args.length == 1) args = [this, args[0]];
	for (var prop in args[1]) args[0][prop] = args[1][prop];
	return args[0];
};

  Extend是扩展了，bk是什么?偶猜测是作者 Brian Kirchoff 的缩写吧.

这个函数的功能倒是很明确.根据参数的个数来扩展一个对象.参数个数:

0:当然是返回undefined了.

1:扩展对象是this=传入对象的父级对象,并把参数扩展到this对象。

>1:扩展对象是第一个参数 args[0]，,并把参数扩展到args[0]对象。

初识就先写这么多吧.

 

评论

5 楼 mingliangfeng 2009-03-25  

<script. type="text/javascript">
bkLib.onDomLoaded(function() { contentTextArea= new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor','left', 'center', 'right','strikeThrough','subscript','superscript','strikethrough','close','xhtml','link','image']}).panelInstance('content'); });
</script>

var content= trim(contentTextArea.nicInstances[0].getContent());

4 楼 achun 2008-12-15  

tdwm 写道

怎么用js获取页面输入的值啊

由于inEdit的方法是直接修改页面上的element的值，所以获取的时候。有两种方式
1.视inEdit透明，直接用常规js方法获取值，一般来说被修改值的element都有name属性设置.
可以通过name来取值，如果name是唯一的可用原生js就好像这样的语法

document.getElementsByName('yourelementname')[0].innerHTML

如果用框架库，比如jQuery

$('[name=yourelementname]').html()

2.书写OnSave接口，直接在接口里面决定如何处理值

我实际使用的时候是做了一个jQuery扩展.不过是纯粹用于ajax方法的。
我把这个扩展单独写了一篇简单介绍的文章
jQuery扩展ajaxName

3 楼 tdwm 2008-12-15  

怎么用js获取页面输入的值啊

2 楼 achun 2008-10-10  

<div class='quote_title'>zhiye 写道</div>
<div class='quote_div'>请问怎么使得<br/>http://nicedit.com/demos.php?demo=4<br/>中This is text above the Panel 即面板<br/>改成<br/>http://nicedit.com/demos.php?demo=2<br/>中的All Available Buttons {fullPanel : true} <br/>new nicEditor({fullPanel : true}).panelInstance('area2'); <br/>那种样式？<br/></div>
<p> </p>
<pre name='code' class='js'>var myNicEditor = new nicEditor({fullPanel : true});
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('myInstance1');
myNicEditor.addInstance('myInstance2');
myNicEditor.addInstance('myInstance3');</pre>
 
<p> </p>

1 楼 zhiye 2008-10-10  

请问怎么使得
http://nicedit.com/demos.php?demo=4
中This is text above the Panel 即面板
改成
http://nicedit.com/demos.php?demo=2
中的All Available Buttons {fullPanel : true}
new nicEditor({fullPanel : true}).panelInstance('area2');
那种样式？