CKeditor 是一个非常好用的web编辑器，javaEye 上也又很多介绍，有兴趣的同学可以继续围观： http://ckeditor.com/
这里主要讲如何定制 ckeditor 的toolbar，以及让 ckeditor 和 jQuery 协同工作。
1. 在确保 jQuery 能正常工作后，引入 ckeditor， 在 <head> 区添加。
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
2. At this point, any textarea, p or div element can be transformed into a rich text editor by simply using the ckeditor() method:
$( 'textarea.editor' ).ckeditor();
3. 定制 toolbar。
<script>
$(document).ready(function(){
//customize ckeditor toolbar.
var config = {
toolbar:
[
['Source','Preview','-','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','TextColor','BGColor'],
['UIColor','-','Image']
]
};
//fire ckeditor
$("#text").ckeditor(config);
});
</script>
定制后的 toolbar 如下图：
References:
http://ckeditor.com/blog/CKEditor_for_jQuery
CKEditor Toolbar: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
