jquery 编辑器插件 是froala wysiwyg editor。这是一个基于html5的轻量级jquery wysiwyg 文本编辑器 。绿色资源网提供免费使用版本，欢迎下载

jquery编辑器介绍

jquery是一个快速、简洁的 javascript 框架，是继prototype之后又一个优秀的javascript代码库（或javascript框架）。jquery设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化html文档操作、事件处理、动画设计和ajax交互。

jquery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流 浏览器 ，如ie 6.0+、ff 1.5+、safari 2.0+、opera 9.0+等。

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

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

}

?>