最 近在做一个新闻发布平台，放弃了很早的FCKEditor，使用CKEditor和CKFinder，尽管免费的CKFinder是Demo版本，但是功 能完整，而且用户都是比较集中精神发新闻的人，不会在意这个。按照官网的document一步一步配置，虽然并不难，但是有些东西特别分散，还是全英文 的，所以我就整理了一下安装过程和配置，以及需要注意的一些问题。希望对大家有所帮助。

目录 1. 下载CKEditor相关的安装文件 2. 安装CKEditor和CKFinder 3. 在网页里使用CKEditor 4. CKEditor的三种配置方式 5. CKEditor的一些配置选项 6. 关于CKEditor编辑器里面回车的问题 7. 将CKFinder整合进CKEditor 8. 配置CKFinder 9. 在项目里配置CKFinder的servlet 10. 更安全的使用CKFinder

<script type="text/javascript" src="${contextPath}/ckeditor4.1/ckeditor.js"></script>

<form id="detailForm" method="post">

    <textarea id="content" name="content"></textarea>

    <input type="button" value="保存" id="save" onclick="save()" />

</form>

<script type="text/javascript">

    var editor = null;

    window.onload = function(){

        editor = CKEDITOR.replace('content'); //参数‘content’是textarea元素的name属性值，而非id属性值

    }

</script>

editor.setData('这里是需要传递给CKEditor编辑器实例的值');

editor.getData();

<script type="text/javascript">

    function save(){

        editor.updateElement(); //非常重要的一句代码

        //前台验证工作

        //提交到后台

    }

</script>

CKEDITOR.editorConfig = function( config ) {

    config.language = 'zh-cn';

    config.uiColor = '#AADC6E';

};

<script type="text/javascript">

    var editor = null;

    window.onload = function() {

        editor = CKEDITOR.replace( 'content', {

            customConfig:'${contextPath}/ckeditor4.1/myconfig.js'

        });

    };
</script>

<script type="text/javascript">

    var editor = null;

    window.onload = function() {

        editor = CKEDITOR.replace( 'content',

            uiColor: '#9AB8F3',

            language:'zh-cn'

        });

    };

</script>

editor.setData(......

);

<script type="text/javascript">

    var editor = null;

    window.onload = function() {

        editor = CKEDITOR.replace( 'content', {

            customConfig:'${contextPath}/ckeditor4.1/myconfig.js',

            on: {

                instanceReady: function( ev ) {

                    this.dataProcessor.writer.setRules( 'p', {

                        indent: false,

                        breakBeforeOpen: false,   //<p>之前不加换行

                        breakAfterOpen: false,    //<p>之后不加换行

                        breakBeforeClose: false,  //</p>之前不加换行

                        breakAfterClose: false    //</p>之后不加换行7

                    });

                }

            }

        });

    };

</script>

<script type="text/javascript" src="${contextPath}/ckfinder2.3.1/ckfinder.js"></script>

<script type="text/javascript">

    var editor = null;

    window.onload = function() {

        editor = CKEDITOR.replace( 'content', {

            customConfig:'${contextPath}/ckeditor4.1/jwc_config.js'

        });

        CKFinder.setupCKEditor( editor, '${contextPath}/ckfinder2.3.1/' );

    };

</script>

CKEDITOR.editorConfig = function( config ) {
    //其他一些配置

    filebrowserBrowseUrl = '/ckfinder2.3.1/ckfinder.html';

    filebrowserImageBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Images';

    filebrowserFlashBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Flash';

    filebrowserUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Files';

    filebrowserImageUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Images';

    filebrowserFlashUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Flash';

};

<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/ckfinder.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-mapping>

    <servlet-name>ConnectorServlet</servlet-name>

    <url-pattern> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern>

</servlet-mapping>

<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>

<accessControls>

    <accessControl>

        <role>admin</role>

        <resourceType>*</resourceType>

        <folder>/</folder>

        <folderView>true</folderView>

        <folderCreate>true</folderCreate>

        <folderRename>true</folderRename>

        <folderDelete>false</folderDelete>

        <fileView>true</fileView>

        <fileUpload>true</fileUpload>

        <fileRename>true</fileRename>

        <fileDelete>false</fileDelete>

    </accessControl>

</accessControls>

request.getSession().setAttribute("CKFinder_UserRole", "admin");

<servlet>

    <servlet-name>ConnectorServlet</servlet-name>

    <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>

    <init-param>

        <param-name>configuration</param-name>

        <param-value>mypackage.CKFinderConfiguration</param-value>

    </init-param>

    <init-param>

        <param-name>XMLConfig</param-name>

        <param-value>/WEB-INF/ckfinder.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-mapping>

    <servlet-name>ConnectorServlet</servlet-name>

    <url-pattern> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern>

</servlet-mapping> 

import com.ckfinder.connector.configuration.Configuration;
public class CKFinderConfiguration extends Configuration {

    public CKFinderConfiguration(ServletConfig servletConfig) {

        super(servletConfig);

    }

    @Override

    protected Configuration createConfigurationInstance() {

        return new CKFinderConfiguration(this.servletConf);

    }

    @Override

    public boolean checkAuthentication(final HttpServletRequest request){

        String userid = request.getSession().getAttribute("userid");

        boolean logined = !userid.equals("");

        return logined;

    }

}