如何在AngularJS中使用CKEditor上傳圖像？

Question

目前，我正在使用angular-ckeditor添加CKEditor 4 。

在我的模板中，將其顯示為：

<div ng-repeat="editor in editors">
  <div ckeditor="options" ng-model="editor.content"></div>
</div>

我正在尋找一種將圖像從桌面上傳到CKEditor的方法。 據我了解， angular-ckeditor庫和CKEditor庫是分開的，因此我可以輕松添加小部件和插件。

問題是我似乎找不到合適的插件/小部件（ 不使用jQuery ），這將幫助我從桌面上載圖像。 我使它僅適用於圖像鏈接。

官方網站上沒有很多相關文檔。 他們說要使用將上傳和瀏覽圖像的PHP文件，但並沒有真正解釋如何使用，特別是使用angular-ckeditor 。 所以我現在有幾個問題：

• 一個簡單的圖像上傳器需要哪些插件，以便可以將圖像粘貼到CKEditor中？
• 如何使用AngularJS進行設置？
• PHP文件上傳器（/瀏覽器）是什么樣的？

到目前為止，我什至沒有嘗試更改CKEditor選項卡（它應該通過添加“上傳”選項卡和某些其他UI 來更改圖像屬性對話框）。 所以很明顯，我在所有這些地方都缺少可靠的教程。

（ 如果解決方案更簡單， 我也可以嘗試切換到 ng-ckeditor ）

Answer 1

首先，讓我們看一些沒有Angular的基礎知識。 對於CKEditor版本4，我們可以使用filebrowserImageUploadUrl配置選項初始化一個編輯器，該選項啟用File Browser API的功能 ：

CKEDITOR.replace('editor', { 
    filebrowserImageUploadUrl: '/upload.php?type=image' 
});

這只是將編輯器實例加載到<textarea name="editor"> 。 由於我們設置了filebrowserImageUploadUrl選項，因此在編輯器的圖像對話框中可以使用“上載”選項卡。 示例值/upload.php?type=image是服務器上處理上傳的圖像文件的PHP腳本的URL。

當用戶上傳圖像時，CKEditor會將圖像發送到服務器上的該URL。 此URL上的處理程序應驗證請求，調整圖像大小（如果需要），並將上載的圖像移動到服務器上的永久位置。 然后，處理程序將HTML響應連同圖像的公共URL發送回CKEditor。

當然，我們可以用任何語言編寫服務器端處理程序。 : 這是PHP的基本示例，我們將另存為 ：

<?php 
$tempName = $_FILES['upload']['tmp_name'];
$fileName = uniqid() . $_FILES['upload']['name'];
$uploadPath = '/path/to/uploads/' . $fileName;
$imageUrl = 'http://example.com/uploads/' . $fileName;

$success = move_uploaded_file($tempName, $uploadPath);

$html = '<script>window.parent.CKEDITOR.tools.callFunction(%s, "%s", "%s");</script>';
$message = $success ? 'Uploaded successfully.' : 'Upload failed.';
echo sprintf($html, $_GET['CKEditorFuncNum'], $imageUrl, $message);

directory so the browser can fetch the image. 該腳本將上傳的圖像放置到Web服務器的目錄中，以便瀏覽器可以獲取圖像。 它從請求中傳回CKEditorFuncNum參數，以標識上載的適當回調。 此示例提供了一些基本的保護措施，以防止重復的文件名，但是，對於實際應用程序，我們需要添加安全性，驗證和錯誤處理（身份驗證，CSRF，文件類型檢查，最大大小，文件名清理等）。 ）。

---

到目前為止，所有這些都可以與CKEditor的標准內置功能一起使用（不需要插件，Angular或jQuery）。 為了使用戶能夠將圖像拖放或粘貼到編輯器中，我們可以將Upload Image插件添加到CKEditor構建中（或使用CKEditor CDN中的standard-all發行版）。

我們需要在初始化編輯器時聲明插件：

CKEDITOR.replace('editor', { 
    extraPlugins: 'uploadimage',
    filebrowserImageUploadUrl: '/upload.php?type=image' 
});

script to return the JSON response expected by the plugin. ...然后擴展我們的腳本以返回插件期望的JSON響應。 在上一個示例的最后三行之前添加此塊：

if (isset($_GET['responseType']) && $_GET['responseType'] === 'json') {
    echo json_encode([
        'uploaded' => $success,
        'fileName' => $fileName,
        'url' => $imageUrl,
    ]);

    return;
}

Upload Image插件會發送responseType=json URL參數，服務器端腳本可以檢查該參數以確定發送回哪種響應。

---

最后，讓我們看一下如何使用問題中描述的angular-ckeditor包初始化編輯器：

<div ng-controller="EditorCtrl as editor">
    <textarea ckeditor="editor.options" ng-model="editor.content"></textarea>
</div>

var myApp = angular.module('myApp', ['ckeditor'])

myApp.controller('EditorCtrl', function () {
    this.options = {
        extraPlugins: 'uploadimage',
        filebrowserImageUploadUrl: '/image-upload.php?type=image'
    };
});

正如我們所看到的，我們不需要做很多事情就可以將它“角度化”。 創建模板后，我們聲明與傳遞給使用ckeditor指令在元素上引用的控制器上的普通CKEDITOR.replace() 相同的配置選項。