基于jeesite的cms系统(五):wangEditor富文本编辑器

一、关于wangEditor:

wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。

二、创建wangEditor

editor创建十分简单只需要引入js文件(这里注意要加上版本号,具体原因不详),进行一些配置即可

因为这里使用的是Beetl模板表单,所以使用textarea来接收wangEditor的值

var $textarea = $('#textarea')
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$textarea.val(html)
}
<% layout('/layouts/default.html', {title: '发布文章', libs: ['validate','fileupload','ueditor','dataGrid']}){ %>
<div class="main-content">
<div class="box box-main">
<div class="box-header with-border">
<div class="box-title">
<i class="fa fa-list-alt"></i> ${testData.isNewRecord ? '编辑文章' : '编辑文章'}
</div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<#form:form id="inputForm" action="${ctx}/cms/articles/post" method="post" class="form-horizontal">
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 标题:<i class="fa icon-question hide"></i></label>
<div class="col-sm-10">
<#form:input path="title" maxlength="200" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 内容:<i class="fa icon-question hide"></i></label>
<div class="col-sm-10" style="height: 1030px">
<#form:hidden path="content" id="textarea"/>
<div id="editor"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 作者ID:<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:input path="authorId" maxlength="50" class="form-control"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 路径:<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:input path="path" maxlength="50" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 标签:<i class="fa icon-question hide"></i></label>
<div class="col-sm-10">
<#form:input path="tags" maxlength="50" class="form-control"/>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="row">
<div class="col-sm-offset-2 col-sm-10">
<% if (hasPermi('test:testData:edit')){ %>
<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> 发 布</button>&nbsp;
<% } %>
<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> 关 闭</button>
</div>
</div>
</div>
</#form:form>
</div>
</div>
<% } %>
<script type="text/javascript" src="/static/common/wangEditor/wangEditor.js?V4.1-01161701"></script>
<script type="text/javascript">
// 初始化wangEditor
var E = window.wangEditor
var editor = new E('#editor') // 自定义菜单配置
// editor.customConfig.menus = [
// 'bold', // 粗体
// 'fontSize', // 字号
// 'italic', // 斜体
// 'foreColor', // 文字颜色
// 'link', // 插入链接
// 'quote', // 引用
// 'emoticon', // 表情
// 'image', // 插入图片
// 'code', // 插入代码
// ] // 上传图片到服务器
// editor.customConfig.uploadImgShowBase64 = true
// editor.customConfig.qiniu = true
editor.customConfig.uploadFileName = 'myFileName'
editor.customConfig.uploadImgServer = '/upload'
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
var url =result.data;
insertImg(url);
}
}
var $textarea = $('#textarea')
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$textarea.val(html)
}
editor.create()
// 初始化 textarea 的值
$textarea.val(editor.txt.html())
$(".w-e-text-container").css("height", "1000px");
$(".w-e-toolbar").css('font-size','16px');
$(".col-sm-2").css("width","11.66666667%");
$(".col-sm-4").css("width","23.33333333%");
$(".col-sm-offset-2").css("margin-left","11.66666667%");
</script>
<script>
$("#inputForm").validate({
submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message);
if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){
contentWindow.page();
});
}
}, "json");
// js.showMessage('文章发布成功');
}
});
</script>

如果不用beetl表单,只需要这样

var comments = editor.txt.html();

来接收数据

二、文件上传类

wangEditor接受Map返回集

package com.jeesite.modules.cms.web;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest; import com.jeesite.modules.cms.utils.PathUtil;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
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.MultipartFile; /**
* @author zombie
*/
@Controller
public class UploadController { @RequestMapping("/upload")
@ResponseBody
public Map<String, String> upload(@RequestParam(value="myFileName") MultipartFile file, HttpServletRequest request) {
Map<String, String> map = new HashMap<String, String>();
String separator = System.getProperty("file.separator"); // 用于前端图片显示的路径 http://localhost:8080/upload/
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath()
+ separator +"upload" + separator;
// 用于保存图片至项目的路径 D:\_eclipsework\.metadata\.plugins\org.eclipse.wst.server.core\tmp2\wtpwebapps\JYSystem\ upload\
// 或者 String uploadDir = request.getSession().getServletContext().getRealPath("upload") + separator;
String uploadDir = PathUtil.getProjectPath() + separator +"upload" + separator; byte[] bytes = null;
try { bytes = file.getBytes();
File dirPath = new File(uploadDir);
if (!dirPath.exists()) {
if (!dirPath.mkdirs()) {
}
} /**
* 构建新的图片名称
*/
String fileName = file.getOriginalFilename();
int index = fileName.lastIndexOf(".");
String extName = index > -1 ? fileName.substring(index) : ""; // .jpg
String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");
String newFileName = uuid + extName; /**
* 保存图片至项目
*/
String filePath = uploadDir + newFileName;
File descFile = new File(filePath);
FileCopyUtils.copy(bytes, descFile); map.put("data", basePath + newFileName);
} catch (IOException e) {
e.printStackTrace();
} return map;
} }

五、修改视图渲染路径

开始在这里路径总是报错,一度以为是/cms的问题,结果发现是把返回的postArticle.html拼写错了

package com.jeesite.modules.cms.web;

import com.jeesite.common.web.BaseController;
import com.jeesite.modules.test.entity.TestData;
import com.jeesite.modules.test.service.TestDataService;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping; @Controller
@RequestMapping(value = "${adminPath}/cms")
public class CmsController extends BaseController { @Autowired
private TestDataService testDataService; /**
* 获取数据
*/
@ModelAttribute
public TestData get(String id, boolean isNewRecord) {
return testDataService.get(id, isNewRecord);
} /**
* Form
*/
@RequiresPermissions("test:testData:view")
@RequestMapping(value = "form/postArticle")
public String form(TestData testData, Model model) {
return "templates/postArticle";
}
}

基于jeesite的cms系统(五):wangEditor富文本编辑器

基于jeesite的cms系统(五):wangEditor富文本编辑器

上一篇:ibatis源码学习2_初始化和配置文件解析


下一篇:更加简洁易用——wangEditor富文本编辑器新版本发布