开发者

How to integrate CKFinder with CKEditor?

开发者 https://www.devze.com 2023-01-14 12:45 出处:网络
How do you integrate CKFinder with the new CKEditor. It is very underdocumented on the website, and i am literally getting nowhere.

How do you integrate CKFinder with the new CKEditor.

It is very underdocumented on the website, and i am literally getting nowhere.

A step by step guide would be greatly appreciate as, as far as i am aware.. this is the only free/good image upload solution for a wysiwyg editor that is any good. Can someone confirm开发者_如何学C?

Thanks


You can find a tutorial on integrating CKFinder with CKEditor here: http://www.webshaolin.com/index.php?page=article&articleid=40


Try doing following steps.

1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below. 3. Create index file (index.html) which will be containing the editor as below code.

    <html>
    <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
    </head>
    <body>
        <h1>CKEditor CKFinder Integration using PHP</h1>
        <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
    <script type="text/javascript">
    var editor = CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
        filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
        filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
    });
    CKFinder.setupCKEditor( editor, '../' );
    </script>
    </body>
    </html>

so your folder structure will be something like this:

htdocs
|_integrated
    |_ckeditor
    |   |_config.js
    |   |_...
    |_ckfinder
    |   |_config.php
    |   |_...
    |_uploads
    |_index.html
  1. Now open file config.php inside ckfinder & make following changes:

    function CheckAuthentication() {
        // WARNING : DO NOT simply return "true". By doing so, you are allowing
        // "anyone" to upload and list the files in your server. You must implement
        // some kind of session validation here. Even something very simple as...
        // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
        return true; // not good option though; go for sessions
    }
    $baseUrl = 'http://localhost/integrated/uploads/';
    $enabled = true;
    $config['SecureImageUploads'] = false;
    $config['ChmodFolders'] = 0777 ;
    
  2. Now open url http://localhost/integrated/ and try uploading image.


Check the documentation site for your server language: http://docs.cksource.com/CKFinder_2.x For example this part of the PHP docs: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration

And btw, CKFinder is not free, you must get a license in order to use it.


First you must have a textbox to convert to CKEditor:

<textarea id="newTextArea">Some text</textarea>

Then all you need is some javascript code for the conversion of this texteditor to a CKEditor instance and the integration of this editor with CKFinder.

<script type="text/javascript">
    var newCKEdit = CKEDITOR.replace('newTextArea');
    CKFinder.setupCKEditor(newCKEdit, '/ckfinder/');
</script>

The second parameter of the setupCKEditor function must be the folder in your website where you uploaded ckfinder.

http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号