jquery文本编辑器插件(Froala WYSIWYG Editor) 免费版

Froala WYSIWYG Editor是一款好用的jquery文本编辑器插件，基于HTML5技术设计而来，采用所见即所得的编辑方式，可以快速预览输入内容，还可实现中文菜单和图片上传到本地路径，支持手机和视网膜屏，有需要的jQuery编程人员可以下载！

软件特点

1、微小 - 只需添加您需要的插件(30+ 官方插件)

2、客户端框架集成

3、可以向如 PHP, Node.JS, .NET, Java, 和 Python提供服务端开发工具包

4、代码注释精美

5、在线文档更新

6、简单可扩展- 良好的插件注释使你更容易使用和开发自己的插件

使用教程

jquery编辑器插件实现中文菜单和上传图片保存到本地路径：

<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代码：

// 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));

}

?>