WEB项目中使用UEditor(富文本编辑器)
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器
下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便?
所以本博客介绍这个富文本编辑器的使用哈!觉得写得不错的请点赞哈,有建议欢迎提哈!^V^
下载链接:http://ueditor.baidu.com/website/download.html
具体的使用请看官网:http://ueditor.baidu.com/website/index.html
下载富文本编辑器后,我们打开MyEclipse或者其它编辑软件,选择file->import,选择文件系统,导入下载好的Ueditor
然后启动tomcat服务器
http://localhost:8080/项目名称t/ueditor1_4_3_2/jsp/controller.jsp?action=config
这个要根据你的项目进行修改的哈
可以输出这个,什么编辑器导入成功
引入js,charset属性设置为UTF-8的,因为我的系统默认是UTF-8的
- <span style="font-size:18px;"><script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.config.js"></script>
- <script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.all.min.js"> </script></span>
复制ueditor里面的index,html代码,这个要根据需要去复制的
- <span style="font-size:18px;"><script type="text/javascript">
- //实例化编辑器
- //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
- var ue = UE.getEditor('editor');
- function getContent() {
- var arr = [];
- arr.push("使用editor.getContent()方法可以获得编辑器的内容");
- arr.push("内容为:");
- arr.push(UE.getEditor('editor').getContent());
- alert(arr.join("\n"));
- }
- </script></span>
因为我做的系统只要实现将编辑的文本和样式一起写入数据库,所以只要使用getContext方法就可以
在form表单里加入:
- <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
注意这些属性都不用随便修改的哦
获取文本和文本样式的参考代码,
String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
这个就是获取文本和文本样式的代码,然后下面的代码只是参考的,只要用String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
这代码就可以获取内容
- public class AddSpotInfoServlet extends HttpServlet {
- /**
- *
- */
- private static final long serialVersionUID = 1L;
- /**
- *
- */
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- response.setContentType("text/html;charset=UTF-8");
- PrintWriter out = response.getWriter();
- request.setCharacterEncoding("UTF-8");
- String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
- String picture = Constant.ImgPath.path;
- String position = new String(request.getParameter("position").getBytes("iso-8859-1"),"UTF-8");
- String priceString = new String(request.getParameter("price").getBytes("iso-8859-1"),"UTF-8");
- Double price = Double.parseDouble(priceString);
- String sortString = new String(request.getParameter("sort").getBytes("iso-8859-1"),"UTF-8");
- int spot_sort = Integer.parseInt(sortString);
- // String timeString = new String(request.getParameter("time").getBytes("iso-8859-1"),"UTF-8");
- // Date time = Date.valueOf(timeString);
- String tour_project = new String(request.getParameter("tour_project").getBytes("iso-8859-1"),"UTF-8");
- Spot spot = new Spot();
- spot.setIntroduction(introduction);
- spot.setPicture(picture);
- spot.setPosition(position);
- spot.setPrice(price);
- spot.setSpot_sort(spot_sort);
- spot.setTour_project(tour_project);
- SpotDAO spotDao = new SpotDAOImpl();
- boolean flag = spotDao.addInfo(spot);
- if(flag){
- response.sendRedirect(Constant.WEB_URL_SPOT_SERVLET);
- }
- out.flush();
- out.close();
- }
- /**
- *
- */
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doGet(request, response);
- }
- }
ok,可以将文本和样式一起写入数据库了,哈哈哈,^V^
WEB项目中使用UEditor(富文本编辑器)的更多相关文章
- vue2.0项目中使用Ueditor富文本编辑器示例
最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...
- vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能 重点:ena ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- ASP.NET MVC 中使用 UEditor 富文本编辑器
在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...
- 在网站中使用UEditor富文本编辑器
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择 ...
- 在java项目中加入百度富文本编辑器
富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap
其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...
- django项目中使用KindEditor富文本编辑器。
先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...
随机推荐
- PCI-Express协议传输层读书笔记
http://www.doczj.com/doc/35cb19633169a4517723a3d9-9.html
- Linux之系统管理员笔记
1.查看最近一次启动时间 who -b system boot -- : 2.who命令实现带有“表头”的查询结果 who -H NAME LINE TIME COMMENT root pts/ -- ...
- Roslyn介绍
介绍 一般来说,编译器是一个黑箱,源代码从一端进入,然后箱子中发生一些奇妙的变化,最后从另一端出来目标文件或程序集.编译器施展它们的魔法,它们必须对所处理的代码进行深入的理解,不过相关知识不是每个人都 ...
- 华为/中兴 3G 模块的调试
1 检查/etc/init.d/pppd『红颜色的使上电自动上网注册(如果没有红颜色的语句),请添加』 #!/bin/sh#DAEMON=/usr/sbin/pppdPIDFILE=/var/run/ ...
- PHP——内测:新闻管理练习题及答案(自己做的)
试题看文件:1.28练习内测:新闻管理.pdf 数据库为newssystem 表为news 表内容为 fabuxinwen.php <!DOCTYPE html PUBLIC "-// ...
- call_usermodehelper内核中运行用户应用程序
init是用户空间第一个程序,在调用init前程序都运行在内核态,之后运行init时程序运行到用户态. 操作系统上,一些内核线程在内核态运行,它们永远不会进入用户态.它们也根本没有用户态的内存空间.它 ...
- Linux快速定位并且杀掉占用端口的进程
1.定位 lsof -i:8811(端口号) 2.杀掉进程 kill -9 63924
- MongoDB-Elasticsearch 实时数据导入
时间 2017-09-18 栏目 MongoDB 原文 http://blog.csdn.net/liangxw1/article/details/78019356 5 ways to sync ...
- Pycharm 建立工程,包含多个工程目录
- duilib Webkit内核dui化浏览器控件
參考http://blog.csdn.net/zhuhongshu/article/details/38540711 改进: 1.跟其它duilib控件一样,不包括窗体 2.将onURLChanged ...