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

2021-10-24 01:11:50

一、关于wangEditor：

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

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

二、创建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";

    }

}

码农公寓

相关文章