WYSIWYG ที่ใช้กันอยู่ในท้องตลาด ฮิตๆกันก็ CKEditor, TinyMCE, redactor, FCKeditor เป็นต้น แต่ไม่มีตัวไหนเลยที่เหมือน Aloha

TinyMCE เวลาใช้งานจะต้องฝังลงไปในคอนโทรล ถ้าสมมติว่า ในหน้าเพจนั้นๆ เราต้องการจะใช้ TinyMCE 3 ตำแหน่ง เราก็ต้องสร้าง 3 ตัว
แต่ Aloha นั้นไม่จำเป็นต้องทำอย่างนั้น ตัวมันเองจะไดนามิคไปเอง
ตัวปรับแต่งมีแต่เท่าที่จำเป็นต้องใช้ ทำให้ดูสบายตา และโหลดเร็ว
ทั้งยังสามารถปักหมุดให้มันอยู่ตำแหน่งเดิม บนหน้าจอได้ด้วย ไม่ว่าเลื่อนหน้าเพจไปไหน มันก็จะวิ่งตามไปด้วย

ในเว็บบอกไว้ว่า ประมวลผลเร็วกว่า TinyMCE และ CKeditor ถึง 25%
โหลดเร็วกว่า TinyMCE และ CKeditor ถึง 80%
ถ้าพิจารณาจากศักยภาพของ jQuery น่าเชื่อได้ว่าตัวเลขที่เขาโม้ไว้น่าจะเป็นจริงทีเดียว

Aloha Editor คือ ปลักอินของ jQuery ที่ถูกออกแบบมาใช้เป็น WYSIWYG
เบา ประมวลผลเร็ว โหลดเร็ว ใช้งานง่าย ซัพพอร์ต HTML5 , License ฟรี
URL : http://aloha-editor.com/
คุณสมบัติ : http://aloha-editor.com/features.html
Demo : http://aloha-editor.com/demos/wordpress-demo/

TinyMCE facebook ยังใช้เลย
แทรกรูปได้นะ แต่ต้องใส่ Plugin ตัวนี้ http://justboil.me/

CKEditor พัฒนามาจาก FCKeditor
FCKeditor พัฒนาตั้งแต่ปี 2003 ผู้พัฒนาจึง Rebrand เป็น CKEditor

CKEditor , CKFinder

กำหนดคุณสมบัติของกรอบ Text Editor

เนื่องจากการใช้งานจริง กรอบ Text Editor ที่ CKEditor สร้างขึ้นมา เราต้องควบคุมการแสดงผลด้วยเช่น อยากให้กรอบกว้างยาวเท่านี้ อยากให้กรอบมีปุ่มเครื่องมือเท่านี้ ปุ่มนี้ไม่อยากได้ อะไรแบบนี้ จากที่ผมแกะๆมาจากหน้า sample ก็พอสรุปรายละเอียดได้ดังนี้

วิธีการกำหนดคุณสมบัติ

    <script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message',{
// อยากกำหนดอะไรก็ใส่ที่นี่
} );
//]]>
</script>

คุณสมบัติต่างๆเช่น

Skin ปุ่มไอคอนต่างๆ

เจ้า CKEditor นี้มาพร้อมกับ skin หน้าตาดีใหม่ชื่อว่า kama (ประวัติไม่รู้ไปสืบกันเอาเอง) และ skin เดิมจาก FCKeditor เช่น office2003, V2 มาครบ วิธีเรียกก็ระบุไปว่า

skin   : 'kama',
skin   : 'office2003',
skin   : 'v2',

อยากตัวไหนก็ระบุลงไปเช่น

    <script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message',{
skin   : 'office2003',
} );
//]]>
</script>

กว้าง ยาว กำหนดได้

กำหนดความกว้าง ความยาวของ Text Editor ได้ด้วย

height   : 400,
width    : 750,

เมื่อเรากำหนดลงไป Text Editor ที่ได้จะกำหนดขนาดเริ่มแรก ตามที่เราระบุไว้ แต่ CKEditor เจ๋งกว่านั้น คือ ที่มุมขวาล่างของกรอบ เราสามารถใช้ลาก Mouse ดึงเอาขนาดใหม่ได้ตามชอบใจเลย เหมือน TinyMCE

ระบุภาษา

language   : 'en',

แต่งสี

เป็นของเล่นที่ CKEditor เหนือกว่า FCKeditor เพราะแต่งสีพื้นหลังให้เข้ากับ CMS ที่เราออกแบบได้โดยระบุใช้ plugin เพิ่มเติม (CKEditor ออกแบบใหม่ทำให้บางส่วนจะถูกส่งไปเป็น Plugin แทน core ของระบบ)

extraPlugins   : 'uicolor',
uiColor          : '#006699',

ชอบปุ่มไหนไม่เอาปุ่มไหนเลือก เอาเข้าเอาออกได้ตามใจชอบ

บางปุ่มเราไม่จำเป็นต้องใช้ก็คัดออกไปได้การกำหนดก็ระบุว่า

    toolbar :
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

],

นี่เป็นชุดปุ่มเต็มทั้งหมด ถ้าไม่อยากได้ปุ่มไหนก็ลบทิ้งโลด เช่น

    toolbar :
[
['Source','-','Templates'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

],

สุดท้ายแล้วก็เอา CKFinder มาต่อร่วมเข้าไปอีก

ก่อนจะเอาไปต่อร่วมอย่าลืม Config ตัว CKFinder ให้พร้อมใช้งานก่อนนะครับ ไปดูวิธีตาม บทความ นี้

แสนจะง่ายแค่เพิ่ม Code นี้ต่อท้ายเข้าไป

    filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

แทรกโค้ด แทบเครื่องมือCKEditor WYSIWYG Editor ลงบน textarea

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="message" name="message" rows="10" >ทดสอบความหล่อ</textarea>
    <script type="text/javascript">
        //<![CDATA[
            CKEDITOR.replace( 'message',{

            skin            : 'kama',
            language        : 'en',
            extraPlugins    : 'uicolor',
            uiColor            : '#006699',
            height            : 400,
            width            : 750,

            toolbar :
                [

                    ['Source','-','Templates'],
                    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

                ],

            filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
            filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
            filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
            filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
            filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
            filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

            } );
        //]]>
    </script>
</body>
</html>

การใช้งาน CKEditor CDN และการประยุกต์ รองรับการอัพโหลดไฟล์

<?php
// โค้ดตัวอย่างการรับค่า กรณีส่งค่าแบบ submit ธรรมดา
if(isset($_POST['detail'])){
    echo "TITLE=>";
    echo $_POST['title'];
    echo "DETAIL=>";
    echo $_POST['detail'];
    exit;   
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
<!--        ตัวอย่างนี้ใช้ css  ของ bootstrap จัดรูปแบบ หากไม่ใช่ สามารถตัดออกได้-->
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
<!--         ตัวอย่างนี้ใช้ jquery library สำรหับเรียกใช้งานกับ ajax หากใช้ตัวอื่่น สามารถตัดออกได้-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>          
       <!-- เรียกใช้งาน  ckeditor cdn -->
        <script src="//cdn.ckeditor.com/4.5.10/full/ckeditor.js"></script>
    </head>
    <body>
    <br>
<br>
    <div class="container">
    <div style="width:700px;margin:auto;">
     <form action="" method="post" name="form_demo" id="form_demo">
 
        TITLE:<br>
        <input name="title" type="text" id="title" size="50" class="form-control"><br><br>
        DETAIL:<br>
        <textarea name="detail"></textarea>
        <script>
            var pathURL= 'http://localhost/demo/ckeditor_cdn/'; // เปลี่ยนเป็น path ที่เก็บไฟล์ ckeditor_config.js
                         
            var cke = CKEDITOR.replace( 'detail', {
                customConfig: pathURL+'ckeditor_config.js' 
            });
        </script>
 
        <br>
      <input type="submit" name="Submit" id="button" class="btn btn-info" value="คลิกที่นี่เพื่อส่งข้อมูลแบบ ปกติ">
      <input type="button" name="submit_ajax" id="submit_ajax" class="btn btn-warning" value="คลิกที่นี่ส่งข้อมูลด้วย Ajax">
        <button type="button" class="btn btn-success" onClick="window.location='ckeditor_cdn.php'">Reload</button>
    </form>
    </div>
    </div>
 
      <script type="text/javascript">
      $(function(){
          // โค้ดตัวอย่างการส่งค่า กรณีส่งค่าแบบ ajax
          $("#submit_ajax").on("click",function(){
              $.post("ckeditor_cdn.php",{
                  title:$("#title").val(),
                  detail:cke.getData()
              },function(response){
                  alert(response);
              });
              console.log(cke.getData());
          });
      });
      </script>
    </body>
</html>

ไฟล์ ckeditor_config.js สำหรับตั้งค่า ckeditor 

CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
/*      { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },*/
        { name: 'links' },
        { name: 'insert' },
/*      { name: 'forms' },*/
/*      { name: 'tools' },*/
/*      { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },*/
/*      { name: 'others' },*/
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' }
    ];  
    config.language = 'th';
    config.removePlugins = 'magicline';
    config.enterMode = 3;
    config.width = '700';
    config.uiColor = '#EFE4B0';
    config.allowedContent = true; 
    config.removeDialogTabs = 'image:advanced'; // ซ่อนปุ่มชั่นสูง
//  config.extraPlugins = 'filebrowser';    
//  config.filebrowserBrowseUrl = '/browser/browse.php';
    config.filebrowserUploadUrl = 'uploadfunc.php';  // แสดงแท็บอัพโหลดไฟล์รูป เมือ่แทรกรูป
// การตั่งค่าอื่นๆ ใด เพิ่มเติมสามารถเข้าไปดูรายละเอียดที่ 
// http://docs.ckeditor.com/#!/api/CKEDITOR.config  
};

ไฟล์สำหรับฟังก์ชั่นอัพโหลดรูปภาพ uploadfunc.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
<?php
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;
// Optional: compare it with the value of `ckCsrfToken` sent in a cookie to protect your server side uploader against CSRF.
// Available since CKEditor 4.5.6.
$token = $_POST['ckCsrfToken'] ;
 
function uppic_only($img,$imglocate,$limit_size=2000000,$limit_width=0,$limit_height=0,$i_num=NULL){  
    $allowed_types=array("jpg","jpeg","gif","png");     
//  echo "1<br>";  
    $file_up=NULL;  
    if($img["name"]!=""){  
        $fileupload1=$img["tmp_name"];  
        $data_Img=@getimagesize($fileupload1);  
        $g_img=explode(".",$img["name"]);  
        $ext = strtolower(array_pop($g_img));    
        if($i_num){  
            $file_up=time()."-".$i_num.".".$ext;          
        }else{  
            $file_up=time().".".$ext;                     
        }  
        $canUpload=0;  
//      echo "2<br>";  
        if(isset($data_Img) && $data_Img[0]>0 && $data_Img[1]>0){  
//          echo "3<br>";  
            if($img["size"]<=$limit_size){                 
                if($limit_width>0 && $limit_height>0){  
                    if($data_Img[0]<=$limit_width && $data_Img[1]<=$limit_height){  
                        $canUpload=1;  
//                      echo "5<br>";  
                    }                     
                }elseif($limit_width>0 && $limit_height==0){  
                    if($data_Img[0]<=$limit_width){  
                        $canUpload=1;  
//                      echo "6<br>";  
                    }         
                }elseif($limit_width==0 && $limit_height>0){  
                    if($data_Img[1]<=$limit_height){  
                        $canUpload=1;  
//                      echo "7<br>";  
                    }                                                 
                }else{  
                    $canUpload=1;                     
//                  echo "8<br>";  
                }             
            }else{  
//              echo "4<br>";  
            }             
        }         
        if($fileupload1!="" && @in_array($ext,$allowed_types) && $canUpload==1){              
                if(is_uploaded_file($fileupload1)){  
                    @move_uploaded_file($fileupload1,$imglocate.$file_up);    
                    @chmod($imglocate.$file_up,0777);                                 
                }  
        }else{  
            $file_up=NULL;  
        }  
    }  
    return $file_up; // ส่งกลับชื่อไฟล์  
}  
// ถ้ามีการส่งไฟล์มาทำการอัพโหลด
if($_FILES["upload"]){
    // อัพโหลดรูปพาพไปที่โฟลเดอร์ picupload เปลี่ยนชื่ออื่นถ้าต้องการ
    $file_up=uppic_only($_FILES["upload"],"picupload/");  
/*  สามารถดูรูปแบบการเรียกใช้งานฟังก์ชั่นอัพโหลดเพิ่มได้ที่ 
สร้างฟังก์ชันสำหรับอัพโหลดรูป แบบกำหนดเงื่อนไข อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=440 via @ninenik */
}
 
 
 
// ตรวจสอบชื่อไฟล์ที่อัพโหลด
if($file_up!=NULL){  // ถ้าอัพโหลดแล้วชื่อไฟล์ไม่ว่าง
    $url = 'picupload/'.$file_up; // กำหนด path ของรูปภาพ 
    // สามารถกำหนด path เต็มได้เช่น $url = 'http://www.ninenik.com/picupload/'.$file_up;
    // ข้อความแจ้งอัพโหลดเรียบร้อยแล้ว
    $message = 'File successfully uploaded.';   
}else{
    $url=NULL;
    // ข้อความแจ้งอัพโหลดไม่สำเร็จ
    $message = 'Can not upload file, Please try agian!';    
}
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
</body>
</html>
<?php /*?>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">  
  <input type="file" name="pic_upload" id="pic_upload" />  
  <input type="submit" name="bt_upload" id="bt_upload" value="Submit" />  
</form>  
<pre>  
<?php   
if(isset($_POST["bt_upload"])){  
//  อัพโหลดรูปในโฟลเดอร์ชื่อ picup  
//  ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 2 MB  
//  $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/");  
       
//  ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700   
    $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,700);  
       
//  ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700 สูงไม่เกิน 500  
    $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,700,500);  
       
//  ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB  สูงไม่เกิน 500  
    $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,0,500);      
       
    echo $dataUpPic; // แสดงชื่อไฟล์รูป   
       
//  print_r($dataUpPic);  
}  
?>  
  สามารถดูรูปแบบการเรียกใช้งานฟังก์ชั่นอัพโหลดเพิ่มได้ที่ 
สร้างฟังก์ชันสำหรับอัพโหลดรูป แบบกำหนดเงื่อนไข อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=440 via @ninenik
</pre>  <?php */?>

Ref.