springmvc整合百度编辑器
前言
最近搭建个人博客站,少不了编辑器的整合,现在就分享下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整合百度编辑器相关推荐
- 齐博php百度编辑器上传图片_齐博CMS整合百度编辑器上传附件的BUG以及解决办法...
齐博CMS作为目前PHP类CMS中最草根的CMS,能够及时的为站长们着想,将开源的百度编辑器整合进程序,这是值得广大站长欢呼雀跃的事情.但就目前来说,齐博CMS与百度编辑器的整合还是存在一些细小的问题 ...
- 帝国cms html5 编辑器,帝国cms整合百度编辑器ueditor图文教程
一.UEditor简介 帝国cms自带文本编辑器是fckeditor,用起来效果不太理想. 百度也推出了自己的编辑器UEditor UEditor是由WEB前端研发部开发的所见即所得的开源富文本编辑器 ...
- DWZ(J-UI)整合百度编辑器(UEditor)
首先,在dwz.ui.js中找到 if($.fn.xheditor){ $("textarea.editor",$p).each(function(){ var $this=$(t ...
- phpcms9.6 ueditor_Phpcms v9深度整合百度编辑器Ueditor
PHPCMS V9自带的ckeditor功能有点弱,用起来很不习惯,最近发现百度推出的开源编辑器ueditor还不错,于是开始整合PHPCMS V9和ueditor 1.2,经过拖拖拉拉两周的时间终于 ...
- 百度编辑器整合html,怎么把百度编辑器(Ueditor)整合到dedecms中
Ueditor整合dedecms步骤 1ueditor的下载安装 到ueditor官网下载最新版的编辑器源码,下载地址:ueditor我下载的是[1.2.4.0 PHP 版本] 到dedecms的目录 ...
- 百度编辑器整合html,将百度编辑器(Ueditor)整合到dedecms中的方法
本文实例讲述了将百度编辑器(Ueditor)整合到dedecms中的方法,分享给大家供大家参考.具体分析如下: 现在百度编辑器感觉比dedecms自带的编辑器要强多了,这里就来给大家介绍替换dedec ...
- yii2-Ueditor百度编辑器
今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. 资源下载 yii2.0-ueditor下载路径: https://link.jiansh ...
- ThinkPHP整合百度Ueditor图文教程
ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的 申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HO ...
- 织梦DEDECMS 整合Kindeditor编辑器美化版nkeditor版可H5多图上传摒弃SWF上传
织梦插件说明 织梦DEDECMS 整合Kindeditor编辑器美化版nkeditor版可H5多图上传摒弃SWF上传(UTF版) 本修改整合了Kindeditor编辑器美化版 功能: 1.可多图上传( ...
最新文章
- 先进机器人系统中的关键技术
- Nginx+uWSGI+Django原理
- SPOJ220 Relevant Phrases of Annihilation(后缀数组)
- [转]安装和使用JD-Eclipse插件
- 服务机器人---充电级和行进面
- linspace--创建线性等分向量
- 操作系统:连续分配、分页和分段三种存储分配机制的优缺点
- 刷OJ时输入输出与字符串
- 用linux构建路由器
- ASA/PIX: Load balancing between two ISP - options
- vsftpd使用方法小结、Linux安装JDK出现“NoClassDefFoundError: /Object”的解决方案、ubuntu 12.04安装jdk
- 星环inceptor建表公式以及各个表的区别联系
- C/C++面试宝典2020版(最新版)
- 多路IO转接服务器——epoll模型
- Redis 报错: WRONGTYPE Operation against a key holding the wrong kind of value
- Minio客户端操作
- Java反射的底层原理,以及Java反射的性能分析及优化
- 2023版golang面试题100道(map)
- 为什么iPhone通常比Android具有更好的音质?
- GAMES101-计算机图形学学习笔记-基本线性代数
热门文章
- linux系统界面图形化操作步骤
- Caffe Examples
- 情人节,写给每一位单身朋友,愿早日脱单
- python 制作srt字幕
- 推荐一款Table样式-Tablecloth
- 极客日报:周鸿祎,微信靠摇妹子起家;红米 K40 未发布就炸?真相来了;滴滴高管立军令状:若触碰安红线指标,全年安全绩效清零...
- 提示 STOP:c000021a unknown hard error
- 股票市场情绪量化模型是什么?
- zebra 的Thread机制
- IATF16949认证辅导,促进减少在汽车零部件供应链中易发生的质量波动和浪费