CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

現在還有在維護
因為還有在維護所以應該有圖檔拖曳上傳功能
真的有圖檔拖曳上傳功能 → 讚 live demo

下載及 demo 請到官網：CKEditor

如何使用

下載解壓縮

<script src="/???/ckeditor/ckeditor.js"></script>

1	<script src="/???/ckeditor/ckeditor.js"></script>

到 ckeditor/samples/toolbarconfigurator/index.html 自訂工具列

將設定值取代 config.js 檔案

使用 Ajax 上傳都是未更新前的資料問題

在上傳前套用以下程式

for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();

1	for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();

拖曳圖檔至編輯區

基本知識、觀念建立：File Browser/Uploader

前端的程式都可以直接從官網下載，唯一需要自己準備的只有圖檔上傳後回傳的程式，大概是長這樣：

class Upload {

    function __construct()
    {
        $ResizeWidth = 780;
        $ResizeHeight = 780;
        $id = $_GET['id'];

        $Upload_dir =  '../../Upload/'. $id;
        if ( !is_dir( $Upload_dir ) ) mkdir($Upload_dir);

        $SourceFile = $_FILES['upload']['tmp_name'];
        list($width, $height, $type, $attr) = getimagesize($SourceFile);

        # 儲存的路徑檔名
        $fn = explode('.', $_FILES['upload']['name']);
        array_pop($fn);
        $FileName = implode('.', $fn);

        # 上傳圖檔 寬或高 大於重新取樣設定
        if ( $width > $ResizeWidth || $height > $ResizeHeight ) {
            $si = new SimpleImage();
            $si->load($SourceFile)->best_fit($ResizeWidth, $ResizeHeight)->save($Upload_dir.'/'.$FileName.'.png');
        }
        else {
            move_uploaded_file($SourceFile, $Upload_dir.'/'.$FileName.'.png');
        }

        $return = array("uploaded"=>true, "fileName"=>$FileName.'.png', "url"=>"/photo.php?id={$id}&N=".$FileName);
        echo json_encode($return);
    }
}

class Upload {

function __construct()

{

$ResizeWidth = 780;

$ResizeHeight = 780;

$id = $_GET['id'];

$Upload_dir = '../../Upload/'. $id;

if ( !is_dir( $Upload_dir ) ) mkdir($Upload_dir);

$SourceFile = $_FILES['upload']['tmp_name'];

list($width, $height, $type, $attr) = getimagesize($SourceFile);

# 儲存的路徑檔名

$fn = explode('.', $_FILES['upload']['name']);

array_pop($fn);

$FileName = implode('.', $fn);

# 上傳圖檔寬或高大於重新取樣設定

if ( $width > $ResizeWidth || $height > $ResizeHeight ) {

$si = new SimpleImage();

$si->load($SourceFile)->best_fit($ResizeWidth, $ResizeHeight)->save($Upload_dir.'/'.$FileName.'.png');

}

else {

move_uploaded_file($SourceFile, $Upload_dir.'/'.$FileName.'.png');

}

$return = array("uploaded"=>true, "fileName"=>$FileName.'.png', "url"=>"/photo.php?id={$id}&N=".$FileName);

echo json_encode($return);

}

長這樣的根據？

直接從官網範例 → File Upload ，在 Chrome 的 F12 追蹤得到上傳後需要回傳 json

{
"fileName":"\u4e2d\u6587_\u5927\u5bb6_aa_~!.png",
"uploaded":1,"error":{"number":207,"message":"The uploaded file was renamed to \u0022\u4e2d\u6587_\u5927\u5bb6_aa_~!.png\u0022."},
"url":"\/userfiles\/files\/%E4%B8%AD%E6%96%87_%E5%A4%A7%E5%AE%B6_aa_~!.png"
}

{

"fileName":"\u4e2d\u6587_\u5927\u5bb6_aa_~!.png",

"uploaded":1,"error":{"number":207,"message":"The uploaded file was renamed to \u0022\u4e2d\u6587_\u5927\u5bb6_aa_~!.png\u0022."},

"url":"\/userfiles\/files\/%E4%B8%AD%E6%96%87_%E5%A4%A7%E5%AE%B6_aa_~!.png"

}

硬要看官方文件的話，在這裡 → Uploading Dropped or Pasted Files

實際運用的情況

目前 2015.8.26 CKEditor 的版本為 4.5.3
預計達成功能
- 基本文字編輯、格式修改
- 附加圖檔
  - 檔案拖曳直接上傳附加
  - 複製、貼上上傳附加 (目前只支援 Firefox，找尋其他方案)
  - 已上傳可瀏覽後附加不須重新上傳

使用 Plugins

autogrow : 編輯區不是固定尺寸
uploadimage : 拖曳檔案進編輯區即可上傳
image2 : 讓圖片可移動以及改變大小

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

參考資料

Inserting HTML into CKeditor from popup window
[CKEditor] 增加上傳圖片功能 (這個用在圖片按鈕內的「瀏覽伺服器」，最後插入圖片的 Javascript 不同)

準備好以下材料

下載官方的 custom plugin : Timestamp Plugin
瀏覽圖庫的程式

操作流程長這樣

從工具列點選瀏覽圖庫按鈕，彈出一個瀏覽圖庫子視窗
選取後點選圖片
將圖片插入編輯區，關閉瀏覽圖庫視窗 (實際程式流程為相反)

實際上的操作就是按一下工具列按鈕，然後按一下圖片這兩下

關鍵點

window.opener.CKEDITOR.instances['id_NOTE'].insertHtml('ccc');

1	window.opener.CKEDITOR.instances['id_NOTE'].insertHtml('ccc');

編輯時和前端顯示相同 CSS 結果

config.js

config.contentsCss = '../../css/modern-business.css';

1	config.contentsCss = '../../css/modern-business.css';

3,191 total views, 2 views today

CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

如何使用

使用 Ajax 上傳都是未更新前的資料問題

拖曳圖檔至編輯區

實際運用的情況

使用 Plugins

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

編輯時和前端顯示相同 CSS 結果

Related Post

發佈留言

CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

如何使用

使用 Ajax 上傳都是未更新前的資料問題

拖曳圖檔至編輯區

實際運用的情況

使用 Plugins

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

編輯時和前端顯示相同 CSS 結果

Related Post

JavaScript

使用 DNS 解決 CDN 差異問題

使用 .htaccess 設定無法使用 ini_set() 的參數

發佈留言