|
|
软件标签: jquery 编程辅助
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;
echostripslashes(json_encode($response));
}
?>
"bigpic">安装详细截图
|
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
发表于 2025-3-14 12:03:29