用ckeditor5實現圖片上傳功能

圖片上傳功能在現代網站中是非常常見的，本文將通過使用ckeditor5編輯器來演示如何實現圖片的上傳功能。ckeditor5是一個現代的、模塊化的編輯器，可以讓您更輕鬆地創建，並提供全套的編輯功能。同時，它也提供了可擴展性，可以通過插件來擴展各種編輯功能，其中就包括圖片上傳功能。下面我們就來具體學習如何實現這個功能。

一、選取圖片上傳插件

眾所周知，實現圖片上傳最關鍵的是要選取一款適合的圖片上傳插件。在這裡我們選擇了”Editor Upload Image”這個插件。你可以通過下面的代碼下載他：

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-upload@27.1.0/dist/ckeditor5-upload.min.js"></script>

二、集成插件到ckeditor5編輯器

將插件集成到ckeditor5編輯器中非常簡單，您只需要在ckeditor5配置文件中加入下面的一行代碼即可：

import UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/basicuploadadapter';

這一行代碼引入了上傳適配器，並且可以通過普通的上傳方式進行圖片上傳。

三、配置上傳功能

下一步是配置ckeditor5編輯器的上傳功能，這需要使用到下面這些參數：

• uploadUrl：上傳的url地址，可以是你自己伺服器上面的api介面地址。
• jsonFieldName：圖片上傳表單中圖片信息的名稱，例如我們可以用imageFile作為我們上傳圖片的表單名稱。
• headers：你可以在請求上傳時帶上你需要的headers信息.

您可以通過下面的配置代碼來實現上傳功能:

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'uploadImage'],
  },
  image: {
    toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
  },
  language: 'en',
  image: {
    // You need to configure the image toolbar, too, so it uses the new style buttons.
    toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ],
 
    styles: [
      // This option is equal to a situation where no style is applied.
      'full',
 
      // This represents an image aligned to the left.
      'alignLeft',
 
      // This represents an image aligned to the right.
      'alignRight'
    ],
 
    // Configure the available image resize options.
    resizeOptions: [
      {
        name: 'resizeImage:original',
        value: null,
        label: 'Original Size'
      },
      {
        name: 'resizeImage:50',
        value: '50',
        label: '50%'
      },
      {
        name: 'resizeImage:75',
        value: '75',
        label: '75%'
      }
    ],
    // You need to configure the image upload plugin and its toolbar, too.
    upload: {
      // The URL that the images are uploaded to.
      uploadUrl: 'http://example.com/webpage/api/image/upload',
 
      // Headers sent along with the XMLHttpRequest to the upload server.
      headers: {
        'X-CSRF-TOKEN': 'CSRF-Token',
        Authorization: 'Bearer '
      },
 
      // Form data sent along with the XMLHttpRequest to the upload server.
      formFields: {
        imageFile: 'imageFile'
      },
 
      // Do not save the uploaded image ID in the markup, by default.
      // Instead, after upload, the server should return a JSON object containing
      // the ID of the uploaded image. The image widget then can be updated with this ID.
      responseHandler: responseData => {
        return { default: responseData[ 'image' ] };
      },
 
      types: [ 'jpeg', 'png', 'gif' ]
    }
  },
 
  // This value must be kept in sync with the language defined in webpack.config.js.
  language: 'en'
};

通過上面的步驟，我們就成功的將圖片上傳插件集成到了ckeditor5編輯器中，並且實現了圖片上傳的功能。

四、其他注意事項

在使用過程中，需要注意下面的這些問題：

• 確保你的伺服器有足夠的空間來存儲上傳的圖片.
• 圖片文件名不能包含特殊字元和空格.
• 確保你的伺服器支持上傳的圖片類型.
• 在上傳期間，確保圖片不會太大導致網站載入緩慢.

希望這篇文章對你理解如何將圖片上傳插件集成到ckeditor5編輯器中，並實現圖片上傳功能有所幫助。