ColdFusion 配置CKEditor&CKFinder

先Download source & development doc，http://docs.cksource.com & http://ckeditor.com

#1.在项目中引用/ckeditor/ckeditor.js&/ckfinder/ckfinder.js，首先需要获得ckeditor的instance，使用textarea用来被ckeditor replace获取。

Function replaceEditor 用于create ckeditor instance，param objname是textarea的id，后面可接参数用于config or add ckfinder to ckeditor。

//初始化CkFinder
on :
        {
            instanceReady : function( ev )
            {
                // Output paragraphs as <p>Text</p>.
                this.dataProcessor.writer.setRules( 'p',
                    {
                        indent : false,
                        breakBeforeOpen : false,
                        breakAfterOpen : false,
                        breakBeforeClose : false,
                        breakAfterClose : false
                    });
            }
        }
        });
        CKFinder.setupCKEditor(editor, '../' ) ;

#2.设置CKEditor与获取CKEditor的值

//setData
    var setValue = function (data)
    {
        editor.setData(data);
    }
    
    //getData
    var getValue = function()
    {
        return editor.getData();
    }

可将CKEditor放与FORM中，Save操作时会自动做提交，在Request页面可用Form.instanceName（InstanceName：TextArea的ID）获取值。

以Coldfusion为例，对于可能出现编码问题导致CKEditor无法使用的情况，传值时可用URLEncodedFormat(content)进行编码，然后利用JS中

decodeURIComponent(content)进行解码。再用SetValue()进行赋值。

#3.About Config(CKEditor)

    //css 样式   
    CKEDITOR.config.contentsCss = '../contents.css';
    //config.uiColor = '#AADC6E';//编辑器颜色 
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; 
    config.toolbar=
    [ 
         ['Source','-','Preview','-','Save','-','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'], 
        ['Link','Unlink','Anchor'], 
          ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], 
        '/', 
        ['Styles','Format','Font','FontSize'], 
        ['TextColor','BGColor'], 
        ['Maximize', 'ShowBlocks','-','About'] 
     ];

    //remove config
    config.removePlugins = '';

#4.About Config(CKFinder)

一般需要配置

//访问图片的路径
config.baseUrl = "/";
//物理路径
config.baseDir = "d:\www\resources\";

config.resourceType[2] = structNew();

config.resourceType[2].name = 'Images';
//Image Browser StartPath
config.resourceType[2].url = config.baseUrl & 'images';

config.resourceType[2].directory = config.baseDir & 'images';

config.resourceType[2].maxSize = 0;

config.resourceType[2].allowedExtensions = 'bmp,gif,jpeg,jpg,png';

config.resourceType[2].deniedExtensions = '';

　　

代码示例

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor_source.js"></script>
<script type="text/javascript" src="../ckfinder/ckfinder.js"></script>
<script type="text/javascript">    
    //instance ckeditor
    var editor;
    var replaceEditor=function (objname)
    {
        var obj = document.getElementById(objname);
        if  (obj) editor = CKEDITOR.replace(objname,{
        filebrowserBrowseUrl : '/ckfinder/ckfinder.html',//查看CK源码得知浏览服务器按钮有个这种属性指点击后启用的URL，这里指载入CKfinder
        filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',//点击CK图片按钮时浏览服务器按钮浏览图片存储的文件夹
        filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', //点击flash按钮时浏览服务器按钮浏览图片存储的文件夹
        filebrowserUploadUrl : '/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Files',     //指启用上传，并指定上传文件调用的php文件
        filebrowserImageUploadUrl : '/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Images',    //上传图品文件时调用的php文件
        filebrowserFlashUploadUrl : '/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Flash',
        on :
        {
            instanceReady : function( ev )
            {
                // Output paragraphs as <p>Text</p>.
                this.dataProcessor.writer.setRules( 'p',
                    {
                        indent : false,
                        breakBeforeOpen : false,
                        breakAfterOpen : false,
                        breakBeforeClose : false,
                        breakAfterClose : false
                    });
            }
        }
        });
        CKFinder.setupCKEditor(editor, '../' ) ;
        return editor;
    }

    //setData
    var setValue = function (data)
    {
        editor.setData(data);
    }
    
    //getData
    var getValue = function()
    {
        return editor.getData();
    }
    
</script>

<textarea id="content" name="content" style="width:100%;"></textarea>
<script type="text/javascript">
    replaceEditor("content");
    var value = "";
    value = "<cfoutput>#attributes.value#</cfoutput>";
    setValue(value);
</script>