それで、最近、CMSのWYSIWYGとしてCKEditor + CKFinderの束を取り ました 。 設定、スタイルを少し変更し、CKEditor開発のいくつかのバグを修正しましたが、これについては別のトピックで説明します。 しかし、ファイルマネージャーをセットアップする際、 CKFinderは単純なタスクに遭遇しました。画像のリストを表示するときに、サイズを表示する必要がありました。 設定でこのようなものが見つからなかったとき、私は非常に驚きました。
もちろん、私たちはプログラマーです。 そして、すべてが可能です。 しかし、問題を解決するための公式な方法を見つけたかったのです。 タイプ：隠し設定または他の何か。そのような機能が必要であることは明らかだからです。 そして、放浪は、YandexからGoogleへ、そしてその逆へと始まりました。 まあ、私はメスを引き受ける必要がありました。
もちろん、理解するにはもっと時間がかかりました。
- それはどのように機能しますか？
- 変更する場所
- 正しく行う方法（プログラムロジックに違反せずに、やさしく「浸透」させる）
その結果、 たった2つのファイルに小さな変更を加えるだけで十分であることが判明しました。
1. ckeditor / kcfinder / core / browser.php
2.ckeditor / kcfinder / js / browser / files.js
したがって、最初のファイルckeditor / kcfinder / core / browser.phpを開きます。 目的の関数、 保護された関数getFiles（$ dir）を見つけます。 次に、2つの新しいパラメーターを「終了」に追加します。
'width' => $size[0], 'height' => $size[1],
関数がすべてのファイルに対して機能するため、これがまだ画像ではない場合の「スタブ」
} else { $smallThumb = false; $size[0] = $size[1] = 0; }
その結果、新しい関数は次のようになり始めました。
protected function getFiles($dir) { $thumbDir = "{$this->config['uploadDir']}/{$this->config['thumbsDir']}/$dir"; $dir = "{$this->config['uploadDir']}/$dir"; $return = array(); $files = dir::content($dir, array('types' => "file")); if ($files === false) return $return; foreach ($files as $file) { $size = @getimagesize($file); if (is_array($size) && count($size)) { $thumb_file = "$thumbDir/" . basename($file); if (!is_file($thumb_file)) $this->makeThumb($file, false); $smallThumb = ($size[0] <= $this->config['thumbWidth']) && ($size[1] <= $this->config['thumbHeight']) && in_array($size[2], array(IMAGETYPE_GIF, IMAGETYPE_PNG, IMAGETYPE_JPEG)); } else { $smallThumb = false; $size[0] = $size[1] = 0; } $stat = stat($file); if ($stat === false) continue; $name = basename($file); $ext = file::getExtension($file); $bigIcon = file_exists("themes/{$this->config['theme']}/img/files/big/$ext.png"); $smallIcon = file_exists("themes/{$this->config['theme']}/img/files/small/$ext.png"); $thumb = file_exists("$thumbDir/$name"); $return[] = array( 'name' => stripcslashes($name), 'size' => $stat['size'], 'width' => $size[0], 'height' => $size[1], 'mtime' => $stat['mtime'], 'date' => @strftime($this->dateTimeSmall, $stat['mtime']), 'readable' => is_readable($file), 'writable' => file::isWritable($file), 'bigIcon' => $bigIcon, 'smallIcon' => $smallIcon, 'thumb' => $thumb, 'smallThumb' => $smallThumb ); } return $return; }
その後、2番目のファイルckeditor / kcfinder / js / browser / files.jsを開きます。 また、目的の関数browser.showFilesを見つけます。 ここで変数を宣言します。ファイルの種類に応じて、画像のサイズまたはファイルサイズのみを表示します。
var file_size = (file.width && file.height) ? '<span style="color: #669;">' + file.width + ' x ' + file.height + '</span> (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size);
現在残っているのは、取得した値をテキストの形式で2か所に挿入し、既存の値を置き換えることです。 表示テーブルで：
'<td class="size">' + file_size + '</td>' +
そして、アイコンとして表示されます：
'<div class="size">' + file_size + '</div>' +
その結果、関数は次のようになります。
browser.showFiles = function(callBack, selected) { this.fadeFiles(); setTimeout(function() { var html = ''; $.each(browser.files, function(i, file) { var stamp = []; $.each(file, function(key, val) { stamp[stamp.length] = key + "|" + val; }); stamp = _.md5(stamp.join('|')); // var file_size = (file.width && file.height) ? '<span style="color: #669;">' + file.width + ' x ' + file.height + '</span> (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size); if (_.kuki.get('view') == 'list') { if (!i) html += '<table summary="list">'; var icon = _.getFileExtension(file.name); if (file.thumb) icon = '.image'; else if (!icon.length || !file.smallIcon) icon = '.'; icon = 'themes/' + browser.theme + '/img/files/small/' + icon + '.png'; html += '<tr class="file">' + '<td class="name" style="background-image:url(' + icon + ')">' + _.htmlData(file.name) + '</td>' + '<td class="size">' + file_size + '</td>' + '<td class="time" style="color: #966;">' + file.date + '</td>' + '</tr>'; if (i == browser.files.length - 1) html += '</table>'; } else { if (file.thumb) var icon = browser.baseGetData('thumb') + '&file=' + encodeURIComponent(file.name) + '&dir=' + encodeURIComponent(browser.dir) + '&stamp=' + stamp; else if (file.smallThumb) { var icon = browser.uploadURL + '/' + browser.dir + '/' + file.name; icon = _.escapeDirs(icon).replace(/\'/g, "%27"); } else { var icon = file.bigIcon ? _.getFileExtension(file.name) : '.'; if (!icon.length) icon = '.'; icon = 'themes/' + browser.theme + '/img/files/big/' + icon + '.png'; } html += '<div class="file">' + '<div class="thumb" style="background-image:url(\'' + icon + '\')" ></div>' + '<div title="' + _.htmlData(file.name) + '" class="name">' + _.htmlData(file.name) + '</div>' + '<div class="size">' + file_size + '</div>' + '<div class="time" style="color: #966;">' + file.date + '</div>' + '</div>'; } }); $('#files').html('<div>' + html + '</div>'); $.each(browser.files, function(i, file) { var item = $('#files .file').get(i); $(item).data(file); if (_.inArray(file.name, selected) || ((typeof selected != 'undefined') && !selected.push && (file.name == selected)) ) $(item).addClass('selected'); }); $('#files > div').css({opacity:'', filter:''}); if (callBack) callBack(); browser.initFiles(); }, 200); };
これは私にとってどのように見えるかです：
この研究が誰かに役立つことを願っています。