Как я могу использовать Ckfinder с Ckeditor?

Я использовал Ckeditor в моем проекте. Это сработало хорошо. Я могу поставить картинку в текстах, но с URL. Я знаю, что если я хочу загрузить изображение с моего компьютера, я должен использовать CKfinder. Как я могу использовать Ckfinder с Ckeditor?

Я использую этот код для вызова CKeditor:

 protected void Page_Load(object sender, EventArgs e)
{
    String StrScript = "CKEDITOR.replace( '" + TextBox1.ClientID + "',{toolbar : 'Full'});";
    ClientScript.RegisterStartupScript(this.GetType(), "Ck-Js/ckeditor", StrScript, true);

}

Благодарю.

3 ответа

Решение

Для завершения настройки требуется около 5 минут:

  1. Загрузите CKEditor и CKFinder.
  2. Поместите извлеченный код обоих в одну папку внутри xampp, как показано ниже.
  3. Создайте индексный файл (index.html), который будет содержать редактор, как показано ниже.

    <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>
    

поэтому структура вашей папки будет выглядеть примерно так:

HTDOCS
|_integrated
    |_ckeditor
    |   |_config.js
    |   |_...
    |_ckfinder
    |   |_config.php
    |   |_...
    |_uploads
    |_index.html
  1. Теперь откройте файл config.php внутри ckfinder и внесите следующие изменения:

    function CheckAuthentication() {
        return true;
    }
    $baseUrl = 'http://localhost/integrated/uploads/';
    $enabled = true;
    $config['SecureImageUploads'] = false;
    $config['ChmodFolders'] = 0777 ;
    
  2. Теперь откройте URL http://localhost/integrated/ и попробуйте загрузить изображение.

Если у кого-то все еще возникают проблемы с интеграцией CKFinder с CKEditor, попробуйте использовать KCFinder ( http://kcfinder.sunhater.com/).

У него все те же функции, что и у CKFinder, но он бесплатный, с открытым исходным кодом и намного проще в установке и настройке. (Лично я так и не смог правильно установить CKFinder....)

Инструкции по установке для KCFinder находятся здесь: http://kcfinder.sunhater.com/install

А инструкции по интеграции находятся здесь: http://kcfinder.sunhater.com/integrate

  1. https://ckeditor.com/ckeditor-4/download/
  2. скачайте ckfinder поместите их в одном месте, затем

    <textarea class="ckeditor" id="editor1"></textarea>
    

    разместите этот код в footer.php или прямо на странице

    CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html?type=Images',
        filebrowserUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
    });
    

    в ckfinder/config.php файл открыть и внести некоторые изменения

    $config['authentication'] = function () {
      return true;
    };
    
    $config['backends'][] = array(
      'name'         => 'default',
      'adapter'      => 'local',
      'baseUrl'      => 'https://example.com/admin/ckfinder/userfiles/',
      //  'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
      'chmodFiles'   => 0777,
      'chmodFolders' => 0755,
      'filesystemEncoding' => 'UTF-8',
    );
    

Вот и все, у меня это работает.
Если это полезно для вас, пожалуйста, оцените меня

Другие вопросы по тегам