ckeditor简单使用心得
最近在使用ckeditor来写文章，深深感觉到他的方便，这是一个所见即所得的编辑器，即你在编辑器中输入的内容是什么样子，那么最后出来的页面也是哪个样子。
下面来讲一下这些天来得使用心得：
1。首先需要下载ckeditor的文件
这个可以在ckeditor的官网上免费下载
如果需要实现上传等功能的话还需要下载ckfinder，同样也可以在官网上下载相应的文件。
2.接着只需要把ckeditor和ckfinder放到项目中即可：
其中：ckeditor文件夹是下载下来的ckeditor_4.x.x_xx.zip压缩包下的ckeditor
ckfinder的路径为（以java为例）：ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/
所需的jar包如下：
3.如果要使用ckfinder则需要进行如下配置：
a。配置config.xml：
config.xml可以在ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/WEB-INF下找到
直接把config.xml复制到项目的WEB-INF下即可
把第一行<enable>false</enable>
改成 <enable>ture</enable>
config.xml下的第三行：
<baseURL>即为文件上传的路径
b。配置web.xml
把如下代码插入即可：
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>CkServlet</servlet-name> <servlet-class>cn.coolwind.servlet.CkServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CkServlet</servlet-name> <url-pattern>/CkServlet</url-pattern> </servlet-mapping>
4.如果不需要上传，则不用第三步，直接在页面中加入ckeditor
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%> <%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function test() { //JavaScript判空，如果确定 var editor_data = CKEDITOR.instances.content.getData(); if(editor_data==null||editor_data==""){ alert("数据为空不能提交"); }else{ if(confirm(editor_data)){ document.myform.submit(); } } } </script> <title>ckeditor富文本测试-- by jCuckoo</title> </head> <body> <form action="<c:url value="/CkServlet" />" name="myform" method="post"> <input type="hidden" name="method" value="ckeditor" /> <ckfinder:setupCKEditor editor="content" basePath="ckfinder/" /> <ckeditor:editor basePath="ckeditor/" editor="content" value="test" /> <input type="button" onclick="test()" value="提交数据"/> </form> </body> </html>
至此已经可以显示出ckeditor了：
下面来说下ckeditor的一些简单的配置：
1.config.js文件：你可以通过修改他来实现你想要ckeditor展现出来的样子
CKEDITOR.editorConfig = function (config) { //Define changes to default configuration here. For example: // config.language = 'fr'; //config.uiColor = '#AADC6E'; config.uiColor = '#00BBEC';//修改边框颜色 //设置宽高 config.width = 700; config.height = 200; config.toolbar = 'MyToolbar'; //config.toolbar = 'Full'; //config.toolbar = 'Basic'; config.toolbar_Full = [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['BidiLtr', 'BidiRtl'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ]; config.toolbar_MyToolbar = [ ['NewPage','Preview'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'], ['Image','Flash','Table'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], '/', ['Styles','Format'], ['Bold','Italic','Strike'], ['Link','Unlink','Anchor'], ['TextColor','BGColor','CreateDiv'], ]; };
其中toolbar为工具栏中显示出来的按钮，你可以在其中设置你想要出现的按钮；
2.contents.css文件:修改页面显示的CSS样式
3.styles.js文件：可以在其中增加你想要的样式
具体的格式为：
{ name:'样式名称', element:'样式的元素', styles:{ 'xxx':'xxx', 'xxx':'xxx' } }，
例如：
{
name: 'MyStyle3',
element: 'section',
styles: {
'max-width': '740px',
'word-wrap': 'break-word',
'padding': '15px 25px',
'top': '0px',
'line-height': '24px',
'font-size': '14px',
'vertical-align': 'baseline',
'border-left': '10px solid #00BBEC',
'background-color': '#EFEFEF'
}
},
效果为：
