phpstudy集成环境

 首页 > 求助，CKEditor 如何使用？

求助，CKEditor 如何使用？

实在是很摸不着头脑，目的是想调用出编辑器的“图片上传对话框”，如何才可以实现？
官网的介绍是 http://docs.ckeditor.com/#!/guide/dev_dialog_add_file_browser-section-...，提示使用 Please refer to the Dialog definition API for general help on how to create a dialog box. ，没有看懂，疑问：

1）默认的编辑器中已经有图片上传功能了，新增这个dialog，那岂不是有2个？
2）这个 CKEDITOR.dialog.add 如何才可以使用

按照官网的一个例子，可根本就没有任何变化




<script type="text/javascript">

CKEDITOR.replace('addform-content', {"height":300,"toolbarGroups":[{"name":"clipboard","groups":["mode","undo","selection","clipboard","doctools"]},{"name":"editing","groups":["tools","about"]},"/",{"name":"paragraph","groups":["templates","list","indent","align"]},{"name":"insert"},"/",{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"colors"},{"name":"links"},{"name":"others"}],"removeButtons":"Smiley,Iframe"});

CKEDITOR.config.filebrowserImageBrowseLinkUrl = '/upfile/browse';
CKEDITOR.config.filebrowserImageBrowseUrl = '/upfile/browse?type=Images';
CKEDITOR.config.filebrowserImageUploadUrl = '/upfile/upload?type=Images';
CKEDITOR.dialog.add( 'testOnly', function( editor ) {
    return {
        title:          'Test Dialog',
        resizable:      CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth:       500,
        minHeight:      400,
        contents: [
            {
                id:         'tab1',
                label:      'First Tab',
                title:      'First Tab Title',
                accessKey:  'Q',
                elements: [
                    {
                        type:           'text',
                        label:          'Test Text 1',
                        id:             'testText1',
                        'default':      'hello world!'
                    }
                ]
            }
        ]
    };
} );

</script>

CKEDITOR.dialog.add( 'testOnly',function(){})，可编辑器没有任何变化。

我不是这个意思，我要实现的是在页面的一个地方加一个按钮“上传图片”，用户一点击，就会自动调用CKEditor 的那个上传图片的方法，弹出上传图片的框。

因为不是这么做的。所以就会什么反应也没有。
一句话说不清楚。首先需要改动comfig.js里面的某几处代码。直到你点那个图片按钮后。出来的对话框里面有4个tab。其中一个可以上传文件了。如果这个你都搞不定。下面的请不用看了。建议你直接换成其他富文本编辑器！
好了。假设你以及到这里了。那我就帮你一把了。
这个时候以及有了上次文件的表单了。看到form标签了吗？看到了那么就需要指定这个form post到那个脚本。然后你就写一个脚本。接受post过来的数据。然后返回一串<script >给CKeditor。大体流程就是这样的。

因为需要定制化CKeditor的一些行为，前段时间一直在看官方的文档

CKEDITOR.config.filebrowserImageBrowseLinkUrl = '/upfile/browse';
CKEDITOR.config.filebrowserImageBrowseUrl = '/upfile/browse?type=Images';
CKEDITOR.config.filebrowserImageUploadUrl = '/upfile/upload?type=Images';

这三行是需要写到ckeditor的配置文件或者在调用replace方法的时候传递进去才行的，如果是想上传本地图片到服务器的话只需要第三行那个配置就可以了。比如：

CKEDITOR.replace("addform-content", {filebrowserImageUploadUrl : '/upfile/upload?type=Images'})

这种方式有些麻烦，每实例化一个CKEDITOR就要写一遍， 最好是自己指定一个配置文件路径，如custom_config.js,在配置文件里把上面那三句话粘进去。
然后调用CKEDITOR时用CKEDITOR.replace("addform-content", {customConfig : 'custom_config.js'})
自定义配置文件路径而不是直接在ckeditor自带的config.js里写配置是为了以后能更方便的升级新版本的CKEDITOR.

目前CKEDITOR 5.0Beta测试版已经支持图片拖拽上传了.

【热门文章】
【热门文章】