基于jeesite的cms系统（五）：wangEditor富文本编辑器

时间 2019-11-11

标签基于 jeesite cms 系统 wangeditor 文本编辑器栏目 CMS 繁體版

原文原文链接

1、关于wangEditor：javascript

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

官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor （欢迎 star）

2、建立wangEditorhtml

editor建立十分简单只须要引入js文件（这里注意要加上版本号，具体缘由不详），进行一些配置便可前端

由于这里使用的是Beetl模板表单，因此使用textarea来接收wangEditor的值java

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表单，只须要这样git

var comments = editor.txt.html();

来接收数据github

2、文件上传类web

wangEditor接受Map返回集ajax

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;
    }

}

5、修改视图渲染路径spring

开始在这里路径老是报错，一度觉得是/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";
    }
}