springmvc整合百度编辑器

原创 2016年09月02日 17:02:07

前言

最近搭建个人博客站,少不了编辑器的整合,现在就分享下springMVC整合百度编辑器的一些心得。

简单步骤

1、百度编辑器官网下载开发版的完整源码。官网地址,点我进去
可以选择最新的jsp的utf8版本下载

2、将解压后的整合文件夹拷贝到项目的wepapp目录下。如图
这里写图片描述
请先忽略上方的ueditor目录。

3、在相应的jsp页面引入百度编辑器,并进行实例化。

<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <script type="text/javascript" src="${URL }/js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.parse.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>
    <form action="blog/add.do" method="post">
        标题:<input name="title" /><br/>
        内容:<script id="editor" type="text/plain" style="width:500px;height:600px;"></script><br/>
        <input type="button" value="添加" onclick="add()">
    </form>

    <script type="text/javascript">
        var ue = UE.getEditor('editor');
        function add(){
            alert(ue.getContent());
        }
    </script>
</body>
</html>

上面是一个简单使用百度编辑器的一个页面。注意引入js文件和百度编辑器文件的时候,我用的前缀是“${URL}”,这是我配的一个网站根目录,大家如果没有配的话可以用“<%=request.getContextPath()%>”代替。要想了解怎么配的,可以看我的博客利用springMVC拦截器配置网站根目录

4、此时访问上页面,基本上文字编辑功能是可以用的,但是图片上传和一些弹窗界面是不可以用的。下面先解决图片上传的问题。
先找到config.json打开。
这里写图片描述
更改“imageUrlPrefix”为当前网站根目录,如图我在本地配的localhost就行了,若部署到服务器上,要配成服务器的ip或者域名。
下面那个“imagePathFormat”是图片保存的路径。用默认的就可以。若成功上传后会在webapp下多一个“ueditor”目录,上传后的图片就在里面
这里写图片描述

接下来发现就可以用图片上传的功能了,但是弹框还用不了,不信可以试试点那个多图上传的图标,按理说应该出来一个弹框界面,但是出现了404,因为被springMVC拦截了,编辑器中的界面都是静态的html结尾的,所以在web.xml加入下面这段代码就行了。

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
版权声明:本文为博主原创文章,未经博主允许不得转载。

SpringMVC 整合 百度编辑器UEditor

1、下载UEditor,这里选择JSP(UTF8)版本和完整源码 。在你的项目中引入JSP(UTF8)版本的文件和完整源码对应的jsp源码。 2、使用maven引入对应的jar包(也可以同过直接...
  • qq_20282263
  • qq_20282263
  • 2016年12月03日 13:54
  • 2474

springmvc与百度Ueditor整合

springmvc与百度Ueditor整合
  • jinzhoujiannan
  • jinzhoujiannan
  • 2017年07月31日 15:15
  • 179

springMVC与百度UEditor的整合

一、概述 因为要做一个文章发布系统,需要用到一个HTML在线编辑器,于是选择了UEditor。网上的文档不是很多,官网上介绍的也不全。结合网络上的代码和源码写了一个例子。 二、实例 1...
  • zyc010
  • zyc010
  • 2017年07月18日 09:43
  • 336

百度UEditor编辑器整合实录

百度UEditor编辑器整合实录在Laravel中手动引入最新版UEditor编辑器。1. 在官网下载的Ueditor编辑器的代码包中根目录下有index.html示例文件,打开该文件,复制head标...
  • chenpenghuan
  • chenpenghuan
  • 2017年03月06日 11:30
  • 559

SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架

SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架,有问题请加群咨询,qq群:524059963...
  • wang1988081309
  • wang1988081309
  • 2016年10月20日 16:53
  • 949

织梦dedecms整合Ueditor1.4.3百度编辑器(最新版2015年12月整合)

一,去官网下载最新的php版, .本整合只修改内容管理器,栏目修改,及自定义页面的编辑器,还用以前默认的.全次共涉及到6个文件的修改. 二,:打开include下的inc文件夹内的inc_func_f...
  • viqecel
  • viqecel
  • 2015年12月20日 10:49
  • 710

jsp 百度编辑器配置 整合springmvc注意细节

百度配置器中默认处理的action可以处理各种请求不需要自己在单独写,尽量不要破坏百度编辑器中自带的jsp demo  我们可以直接使用 参数配置 前后端的配置统一写在后端(PHP版本的confi...
  • xiaohaisen
  • xiaohaisen
  • 2015年10月03日 10:33
  • 707

百度编辑器ueditor与springmvc项目整合

ueditor提供的官方示例没有spring版本的,直接按照jsp版的后台使用问题多多。
  • KanShiMeKan
  • KanShiMeKan
  • 2016年09月12日 09:54
  • 334

百度ueditor与spring mvc结合应做的修改.

使用百度ueditor 作为富文本编辑器时,java 版本默认提供了一个controller.jsp 用来上传,如果要求不高,采用这种方式,确实可以。但如果与spring mvc 结合,并且配置了sp...
  • syong_314159
  • syong_314159
  • 2015年10月13日 14:09
  • 2699

spring和spring MVC整合

spring和springMVC之间的整合,springMVC中的jar包包含spring中的jar包,所以无需再另外导入jar包,只需导入springMVC的jar包即可。 如图一所示: 这...
  • u012734441
  • u012734441
  • 2015年05月16日 07:32
  • 8828
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:springmvc整合百度编辑器
举报原因:
原因补充:

(最多只允许输入30个字)