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
- 大小: 6.8 KB
分享到：
相关推荐
build different versions of programs for different platforms, and customize your builds in other ways.This edition focuses on the GNU version of make, which has deservedly become the industry ...
在这个"CKEditor-Widget-Customize"项目中，我们主要关注的是如何自定义CKEditor的小部件以及实现拖放功能。以下是对这些知识点的详细解释： 1. **CKEditor小部件**： CKEditor的小部件系统允许开发者创建可重用的...
With Make an Arduino Controlled Robot, you’ll learn how to build and customize smart robots on wheels. You will: Explore robotics concepts like movement, obstacle detection, sensors, and remote ...
- Customize your robot with LEDs and speakers to make it light up and play sounds - See what your robot sees with a Pi Camera As you work through the book, you'll learn fundamental electronics skills...
Build, develop, and customize your application using Angular.js and Bootstrap Packed with tips to help you avoid potential stumbling blocks while developing Book Description Two of the most popular ...
- Customize the appearance and behavior of widgets using properties and methods. - Create custom widgets by subclassing existing ones or combining multiple widgets. 5. **Deploying Applications:** ...
Finally, you will learn how to use analytics to track project expenses and keep your accounts simple and easy to maintain and build an Odoo module to extend its functionality and make it work for you...
An indicator view providing you more freedom to control and customize it.zip,An indicator view providing you more freedom to control and customize it.一个魔性的菊花控件，助你摆脱系统菊花的各种烦恼
The book will also help you set up unit and integration testing with different libraries and will show how Gradle and Android Studio can make running tests easier. Finally, you will be shown a number...
including virt-manager, and kimchi-project, everything you do is built around making KVM work for you in the real-world, helping you to interact and customize it as you need it. With further guidance...
Move beyond default UI templates, create and customize amazing UIs with Android Custom View Enable smooth data flow and create futuristic UIs by creating flexible custom views Scale your apps with ...
该插件允许用户完全自定义 Notepad++ 工具栏。 它包括用于常用菜单命令的 26 个附加按钮。 工具栏上的所有按钮都可以自定义，无论是 Notepad++ 按钮、附加按钮还是其他插件按钮。 Notepad++ 菜单命令或其他插件菜单...
Getting Started with OpenCart Module Development gives you step-by-step explanations and illustrations on how to clone, customize, and develop modules and pages with OpenCart. This book shows you how...
Learning Web Development with Bootstrap and AngularJS [PDF+EPUB+MOBI] Build your own web app with Bootstrap and AngularJS, utilizing the latest web technologies About This Book Build, develop, and ...
It will get you up and running quickly and provide you with the skills you need to successfully create, customize, and deploy machine learning applications in real life. What You Will Learn Get a ...