富文本编辑器，jsp取色器等管理后台常用的功能

来源：互联网发布：java float 比较大小编辑：程序博客网时间：2024/06/10 18:41

1.在写运营后台时，我们经常会用到富文本编辑器，比如用来编辑一篇带图片的文章等，此时就需要用到富文本编辑器。

2.运营后台有时候也需要用到要给前台显示的某些字段要有颜色区分，此时我在这边同时也记录学习一下js取色器。

我们会用到两个开源的js文件，大家根据名称百度上肯定一大堆，只要导入到自己的项目静态文件中就可以引导到自己的页面上。我就不做js的具体介绍。

（1）富文本编辑器wangEditor

1首先需要在页面引入css文件 <link rel="stylesheet" type="text/css" href="${ctxStatic}/wangEditor-2.1.13/dist/css/wangEditor.min.css">

2再引入需要的js文件 <script type="text/javascript" src="${ctxStatic}/wangEditor-2.1.13/dist/js/wangEditor.js" charset="utf-8"></script>

3接下去看一下页面的标签，用form表单是path必须用来做编辑器对象的声明,3和4结合起来看

<div class="control-group"><label class="control-label">正文</label><div class="controls" ><form:textarea path="content" htmlEscape="false" class="required" tabindex="2" placeholder="" style="height:240px;"/><span class="help-inline"><font color="red">*</font></span></div></div>

4导入表textArea指定为富文本的javascript代码，new wangEditor('textarea的path或者id')

<script type="text/javascript">    var editor = new wangEditor('content');    editor.config.menus = [                           'source',                           'lineheight',                           'indent',                           '|',                           'bold',                           'underline',                           'italic',                           'strikethrough',                           'eraser',                           'forecolor',                           'bgcolor',                           '|',                           'quote',                           'fontfamily',                           'fontsize',                           'head',                           'unorderlist',                           'orderlist',                           'alignleft',                           'aligncenter',                           'alignright',                           '|',                           'link',                           'unlink',                           'table',                           'emotion',                           '|',                           'img',                           'insertcode',                           '|',                           'undo',                           'redo',                           'fullscreen'                       ];        editor.config.uploadImgUrl = '${ctx}/upload';    editor.config.uploadImgFileName = 'myFileName';        editor.create();    </script>

上面的uploadImgUrl指向你后端的上传文件接口，我这边指导性地把我的上传接口分享一下，我用的是fastdfs上传，之后再学习好fastdfs以后会和大家在共同学习成长做记录。言归正传这个接口接收文件并上传返回上传后的路径。

/** * 处理图片上传、剪裁、压缩，并响应 * @param file * @param request * @param response * @param model * @param redirectAttributes */@RequestMapping(value = "/upload",method=RequestMethod.POST)public void image(@RequestParam("myFileName")MultipartFile file, HttpServletRequest request, HttpServletResponse response, Model model, RedirectAttributes redirectAttributes) {String fileAbsolutePath = "";String path = request.getSession().getServletContext().getRealPath("/userfiles/"+file.getOriginalFilename());try {File destFile = new File(path);FileUtils.copyInputStreamToFile(file.getInputStream(), destFile);logger.info("保存原始图片成功:"+path);InputStream is = new FileInputStream(destFile);BufferedImage bi = ImageIO.read(is);int realWidth=bi.getWidth();int realHeight = bi.getHeight();byte[] fileBuff;if(realWidth>715) {fileBuff = ImageUtils.resizeAndReQuality(destFile, 715, realHeight, 0.9f);} else {fileBuff = ImageUtils.resizeAndReQuality(destFile, realWidth, realHeight, 0.9f);}String ext = FileUtils.getExtension(file.getOriginalFilename());FastDFSFile fastDFSFile = new FastDFSFile(file.getOriginalFilename(), fileBuff, ext);fileAbsolutePath = FastDFSHelper.upload(fastDFSFile);logger.info("上传图片服务器成功:"+fileAbsolutePath);} catch (Exception e) {logger.error("处理图片出错:",e);}try {response.getWriter().write(fileAbsolutePath);} catch (IOException e) {logger.error("响应出错:",e);}}

OK，到这边基本上就完成了整个富文本编辑器的使用过程记录，接下去我们继续了解一下比较简单的js取色

首先同样先导入js文件 <script src="${ctxStatic}/colorpicker/jquery.colorpicker.js" type="text/javascript" ></script>

然后在看一下jsp标签代码

<div class="control-group"><label class="control-label">标签颜色:</label><div class="controls"><form:input path="color" id="mycolor" htmlEscape="false"   /></div></div>

最后当然是自己启动个javascript代码调用整个取色方法

$(document).ready(function(){$("#mycolor").colorpicker({    fillcolor:true});});

好了，到这边两个后台系统比较常用的编辑方式已经分享完了，我想下一个要分享的内容应该是fastdfs服务器文件上传，利用这个周末，自己搞虚拟机伪分布来撘文件服务器，亲试一下从上传到存储到文件服务器整个过程，到时候会好好反思和学习，等一定程度在和大家分享。希望可以对知识有持之以恒的态度。加油吧！

0 0