fckeditor native word 画像ペーストと画像ファイル自動アップロード機能

2年 ago
結衣, 春花
1 minute

現在CKEditorという名称に変更されたFCKeditorは、ウェブページの富テキスト編集に使用されるJavaScriptライブラリです。Wordから画像を貼り付け、自動的にアップロードする機能を実現するには、以下の手順が必要です。

  1. CKEditorエディタがウェブページに統合されていることを確認してください。CKEditorの公式ウェブサイトからダウンロードし、マニュアルを参照して統合できます。
  2. CKEditorを、Wordの画像をペーストできるように設定する必要があります。まず、CKEditorの設定ファイルから次のコードを見つけて、最後に追記します。
config.pasteFromWordRemoveFontStyles = false;
config.pasteFromWordRemoveStyles = false;
config.forcePasteAsPlainText = true;
config.pasteImagesInline = true;

これらの設定オプションを使用すると、Word からコンテンツを貼り付け、画像をエディタに埋め込むことができます。

  1. サーバーサイドのスクリプトを作成して、画像アップロードの要求を処理します。PHP、Python、Node.js など、任意のサーバーサイド言語を使用してスクリプトを作成できます。スクリプトは CKEditor から送信された画像ファイルを受信し、それらのファイルをサーバー上の指定されたディレクトリに保存できる必要があります。

PHP の例をご紹介します

<?php
if ($_FILES['upload']['error'] === UPLOAD_ERR_OK) {
$tempFile = $_FILES['upload']['tmp_name'];
$targetPath = 'uploads/'; // 保存图片的目录
$targetFile = $targetPath . $_FILES['upload']['name'];
move_uploaded_file($tempFile, $targetFile);
// 返回图片的URL地址
$url = 'http://example.com/' . $targetFile;
echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(' . $_GET['CKEditorFuncNum'] . ', "' . $url . '");</script>';
}
  1. CKEditor を配置して、画像アップロード用のサーバー側スクリプトを使用します。CKEditor の設定ファイルで、次のコードを見つけて追加します。
config.filebrowserUploadUrl = '/path/to/upload_script.php';

「/path/to/upload_script.php」の部分を、実際のサーバー側のスクリプトのURLに置き換えます。

  1. 現在、ユーザーが Word の画像を CKEditor に貼り付けると、画像がインラインでエディタに挿入され、自動で指定のサーバー上のディレクトリにアップロードされます。アップロードが成功すると、画像の URL アドレスがエディタに表示されます。

これはあくまで簡単な例なので、貴社のニーズに合わせて変更したり拡張したりしてください。

bannerAds