JQuery編輯器插件是Froala WYSIWYG Editor。這是一個基于HTML5的輕量級jQuery WYSIWYG文本編輯器。綠色資源網(wǎng)提供免費使用版本，歡迎下載

jquery編輯器介紹

jQuery是一個快速、簡潔的javascript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jquery編輯器插件實現(xiàn)中文菜單和上傳圖片保存到本地路徑：

<script src="js/editor/libs/jquery-1.11.1.min.js"></script> 

<script src="js/editor/froala_editor.min.js"></script> 

<!--[if lt IE 9]>

   <script src="../js/froala_editor_ie8.min.js"></script>

<![endif]--> 

<script src="js/editor/plugins/tables.min.js"></script> 

<script src="js/editor/plugins/lists.min.js"></script> 

<script src="js/editor/plugins/colors.min.js"></script> 

<script src="js/editor/plugins/media_manager.min.js"></script> 

<script src="js/editor/plugins/font_family.min.js"></script> 

<script src="js/editor/plugins/font_size.min.js"></script> 

<script src="js/editor/plugins/block_styles.min.js"></script> 

<script src="js/editor/plugins/video.min.js"></script> 

<script src="js/editor/langs/zh_cn.js"></script>

   <script>

       $(function () {

           $('#edit').editable({

               inlineMode: false,

               alwaysBlank: true,

               language: "zh_cn",

               direction: "ltr",

               allowedImageTypes: ["jpeg", "jpg", "png", "gif"],

               autosave: true,

               autosaveInterval: 2500,

               saveURL: 'hander/FroalaHandler.ashx',

               saveParams: { postId: "123" },

               spellcheck: true,

               plainPaste: true,

               imageButtons: ["floatImageLeft", "floatImageNone", "floatImageRight", "linkImage", "replaceImage", "removeImage"],

               imageUploadURL: 'hander/FroalaHandler.ashx',

               imageParams: { postId: "123" },

               enableScript: false

           })

       });

   </script>

<script>

     $(function(){

         $('#edit').editable({

             inlineMode: false, alwaysBlank: true,

             language: "zh_cn",

             imageUploadURL: 'lib/imgupload.php',//上傳到本地服務器

             imageUploadParams: {id: "edit"},

             imageDeleteURL: 'lib/delete_image.php',//刪除圖片

             imagesLoadURL: 'lib/load_images.php'//管理圖片

           }).on('editable.afterRemoveImage', function (e, editor, $img) {

              // Set the image source to the image delete params.        

              editor.options.imageDeleteParams = {src: $img.attr('src')};

              // Make the delete request

.              editor.deleteImage($img);

          });

     });

</script>

jquery編輯器上傳圖片服務器端的PHP代碼：

<?php

   // Allowed extentions.

  $allowedExts = array("gif", "jpeg", "jpg", "png");

   // Get filename.

   $temp = explode(".", $_FILES["file"]["name"]);

   // Get extension.

   $extension = end($temp);

   // An image check is being done in the editor but it is best to

   // check that again on the server side.

   // Do not use $_FILES["file"]["type"] as it can be easily forged.

   $finfo = finfo_open(FILEINFO_MIME_TYPE);

   $mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

   if ((($mime == "image/gif")    || ($mime == "image/jpeg")    || ($mime == "image/pjpeg")    || ($mime == "image/x-png")    || ($mime == "image/png"))    && in_array($extension, $allowedExts)) {

       // Generate new random name.

       $name = sha1(microtime()) . "." . $extension;

       // Save file in the uploads folder.

       move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/" . $name);

       // Generate response.

       $response = new StdClass;

       $response->link = "../../uploads/" . $name;

       echo stripslashes(json_encode($response));

     }

?>