本文共 1352 字,大约阅读时间需要 4 分钟。
1. 从官网最新版的,目前最新版本为Version 4.3.1。
2. 将下载下来的压缩包解压缩后,将文件拷贝到项目的WebContent根目录下,启动服务器,如果能通过服务器地址访问\ckeditor\samples下的例子,则证明CKEditor安装成功。
3. 参照\ckeditor\samples\目录下的replacebyclass.html例子,将以下代码拷贝到需要需要显示文本编辑器的地方。
4. 在该JSP页面的Header处,引入\ckeditor\ ckeditor.js文件。
5. 在\ckeditor\samples\ sample.css文件中,将文本编辑器部分的样式提取出来,放到单独的CSS文件(如blog_ckeditor.css)中,并在页面的Header中引入。
注:请不要直接使用sample.css文件,以防止该文件中的样式与现有系统的样式表冲突。
/** * CKEditor editables are automatically set with the "cke_editable" class * plus cke_editable_(inline|themed) depending on the editor type. *//* Style a bit the inline editables. */.cke_editable.cke_editable_inline{ cursor: pointer;}/* Once an editable element gets focused, the "cke_focus" class is added to it, so we can style it differently. */.cke_editable.cke_editable_inline.cke_focus{ box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000; outline: none; background: #eee; cursor: text;}/* Avoid pre-formatted overflows inline editable. */.cke_editable_inline pre{ white-space: pre-wrap; word-wrap: break-word;}.cke_contents_ltr blockquote{ padding-left: 20px; padding-right: 8px; border-left-width: 5px;}.cke_contents_rtl blockquote{ padding-left: 8px; padding-right: 20px; border-right-width: 5px;}
6. 配置改页面的Action,并将提交方法设置为Post格式提交,至此你就可以在你的页面中展示CKEditor的强大功能了。
转载地址:http://kmnlo.baihongyu.com/