网站文章内容编辑器(一步一步实现改功能下载文件gitee下载文件下载 )

　　网站文章内容编辑器(一步一步实现改功能下载文件gitee下载文件下载

)

　　写在开头

　　我目前在做一个美食博客的网站系统，需要实现发布文章页面的效果（类似CSDN的Markdown写文章@ >)，所以我用UEditor编辑器代替了Markdown编辑器，在发布文章时，可以生成文章的html，直接插入到数据库数据中。

　　先看效果

　　

　　

　　下面详细介绍change函数的实现步骤

　　下载 UEditor 文件

　　gitee下载地址：

　　

　　下载ZIP并解压后，将UEditor文件夹放在web目录下

　　

　　使用 UEditor

　　

ueditor demo

这里写你的初始化内容

var ue = UE.getEditor('container',{

initialFrameHeight :600,

});

var ready=function () {

var html = ue.getContent();//获取html内容，返回: <p>hello

var text=ue.getContentTxt();//获取纯文本内容

alert(html);

};

发布文章

</p>

　　进入主题：发布文章页面

　　实现图片异步上传功能

　　

写文章

Toggle navigation

&#9668 文章管理

&nbsp;&nbsp;0/200

$(&#39;#search_input&#39;).on(&#39;input focus keyup&#39;,

function(){

var strs = $(this).val();

remain = strs.length;

var content_msg = remain;

$(this).next().html(content_msg);

//.next() 方法返回被选元素的后一个同级元素。

}

);

&nbsp;

保存草稿

&nbsp;

发布文章

博文管理

我的博客

退出

这里写你的文章内容

var ue = UE.getEditor(&#39;container&#39;,{

initialFrameHeight :590,

initialFrameWidth :1534,

});

/*

UEditor的后台配置失败！！！！

ue.loadServerConfig();

alert(ue.isServerConfigLoaded());*/

var ready=function () {//点击发布文章按钮

var html = ue.getContent();//获取html内容，返回: <p>hello

var text=ue.getContentTxt();//获取纯文本内容

alert(html);

};

$("#btn_put").click(function () {

$("#myModalLabel").text("发布文章");

var summary=ue.getContentTxt().substring(0,200);

$("#txt_statu").val(summary);

$(&#39;#myModal&#39;).modal();

});

×

发布文章

文章标签

分类专栏

请选择

美食人生

美食评论

大厨授课

达人推荐

旅途美食

回家吃饭

饭后甜点

文章类型

请选择

原创

转载

翻译

摘要

文章图片

点击上传图片至此处

取消

发布文章

var imgUrl;

$("#upload_div").click(function () {//div点击触发inputfile按钮上传文件的功能

$("#upload_file").click();

});

$("#upload_file").change(function () {//选中文件后,异步上传文件并获取上传文件的地址

var fromData = new FormData($("#upload_img")[0]);

/*$("#upload_img").submit();//非异步提交上传文件的表单*/

$.ajax( {/*异步提交上传文件的表单*/

url:&#39;/upload&#39;,

data:fromData,

type:&#39;post&#39;,

//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉

contentType:false,

//取消帮我们格式化数据，是什么就是什么

processData:false,

success:function(data){

console.log(data);

//异步刷新图片

var imgPath=$("#upload_file").val().split("\\");

var imgName=imgPath[2];

imgUrl=&#39;/img/blog-img/&#39;+imgName;

$("#upload_div").html(&#39;&#39;/spanspan class=\n&#39;);

}

});

/*alert(imgUrl);*/

});

$("#btn_submit").click(function () {//点击发布文章按钮，异步提交文章数据，跳转页面

//title,

var title=$("#search_input").val();

if (title){

console.log("title"+title);

} else {

alert("标题不能为空!");

return;

}

// summary,

var summary=ue.getContentTxt().substring(0,200);

if (summary=="这里写你的文章内容" || summary==""){

alert("文章内容什么也没写哦!");

return;

}

console.log("summary"+summary);

// releaseDate,

var date=new Date();

console.log("date"+date);

// content,

var content=ue.getContentTxt();

console.log("content"+content);

// typeid,

var typeName=$("#type_select").val();

if (typeName=="请选择"){

alert("请选择文章类型!");

return;

} else {

var typeid;

switch (typeName) {

case "美食人生":typeid=1;break;

case "美食评论":typeid=2;break;

case "大厨授课":typeid=3;break;

case "达人推荐":typeid=4;break;

case "旅途美食":typeid=5;break;

case "回家吃饭":typeid=6;break;

case "饭后甜点":typeid=7;break;

}

/*alert(typeid);*/

}

// keyWord,

var keyWord=$("#txt_departmentname").val();

/*alert(keyWord);*/

// imgUrl,

imgUrl=imgUrl.substr(1);//去掉第一个 "/"

// author

var author="chif";

blog={title:title,summary:summary,releaseDate:date,likes:0,replyHit:0,content:content,typeid:typeid,keyWord:keyWord,imgUrl:imgUrl,author:author};

//ajax 发布博客

$.post("/addBlog",blog,function (data) {

/*var result=$.parseJSON(data);*/

alert(data);

})

});

</p>

　　页面中ajax请求的后台界面

　　/上传

　　package com.chif.controller;

import com.alibaba.druid.support.json.JSONUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.servlet.http.HttpServletRequest;

import java.io.*;

@Controller

public class FileController {

//@RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象

//批量上传CommonsMultipartFile则为数组即可

@RequestMapping("/upload")

@ResponseBody

public String fileUpload(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request) throws IOException {

//获取文件名 : file.getOriginalFilename();

String uploadFileName = file.getOriginalFilename();

//如果文件名为空，直接回到首页！

if ("".equals(uploadFileName)){

return "redirect:/index.jsp";

}

System.out.println("上传文件名 : "+uploadFileName);

//上传路径保存设置

String path = request.getServletContext().getRealPath("/img/blog-img");

//如果路径不存在，创建一个

File realPath = new File(path);

if (!realPath.exists()){

realPath.mkdir();

}

System.out.println("上传文件保存地址："+realPath);

InputStream is = file.getInputStream(); //文件输入流

OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流

//读取写出

int len=0;

byte[] buffer = new byte[1024];

while ((len=is.read(buffer))!=-1){

os.write(buffer,0,len);

os.flush();

}

os.close();

is.close();

return JSONUtils.toJSONString("上传文件成功！");

}

}

　　/addBlog

　　/**

* 增加一篇博客

* @param blog

* @return

*/

@RequestMapping("/addBlog")

public String addBook(Blog blog){

blogService.addBlog(blog);

return "发布成功";

}