【jQuery】网页文本格式编辑器xheditor
来源:互联网 发布:淘宝子账号怎么用 编辑:程序博客网 时间:2024/05/18 00:37
网页文本格式编辑器xheditor是一款优秀的、开源、兼容IE6的jQuery插件。现在很多网站都涉及到用户的交互,很难想象一个没有输入框的网站是怎么样的,你总不能一个给一个空白的文本框给别人吧?如果让你自己用JavaScript或者jquery写一款文本格式编辑器,费时费力。jQuery插件xheditor是首选。这框插件非常出名、经典,甚至现在正在写csdn的博客编辑器,就是在它的基础上改进过来的,只是比原来的文本编辑器多了一个非常核心的功能而已,就是代码编辑器,具体如下图:
一、基本目标
或许你的网站不一定需要代码段的编辑功能,也可以禁止让用户上传图片,但提供一个让用户能够加粗等、放超级链接、放外链图片的带有一定格式的编辑器,也是兵家必备。制作一款文本编辑器,如下图,能够实现一些word中的基本操作,如加粗、斜体、居中,变颜色等等。下面以JSP为例来说明这款编辑器的用法。PHP与ASPX前端代码都是一样的,还是只是那个参数获取不同而已。
至于怎么完成表单之间的参数传递,就不是本文讨论的重点了。具体可以看:
asp也就是vbscript版的《【ASP】连接Access数据库的登陆系统》(点击打开链接)
aspx也就是aps.NET当时候还没有写编辑记录的习惯,忘记记下来了。
jsp版的请看《【Filter】利用过滤器Filter解决post传递的编码问题与利用EL表达式简化参数传递》(点击打开链接)
php则请看《【php】基本语法与页面之间数值传递》(点击打开链接)
我都写过,都是一些很基础的东西!
二、基本准备
1、直接上xheditor的官网(点击打开链接)获取最新版本的xheditor文本编辑器,如下图:
2、在eclipse里面新建一个工程,在webContent中新建一个js文件夹,并且在webContent中新建一个edit.jsp用来放置编辑器,一个request.jsp用来输出结果。php,aspx的亲门,也是在你的网站中新建js文件夹,设置两个页面,一个让用户输入,一个输出用户的结果就可以了。具体的目录结构如下图:
3、下载xheditor.zip之后解压,把里面的xheditor打头的所有文件夹,src,jquery文件夹,同时还有xheditor.js文件放到我们网站的js文件夹里面,值得注意的是,即使你的网站本来就有jquery,但还是需要用到xheditor本身的jquery,笔者亲测,自己的jquery1.9.11-1.js无法为这个仅需求jquery1.4的xheditor插件,提供支持。
4、刷新一下在eclipse里面的jsp工程,把其配到tomcat里面。
三、制作过程
1、request.jsp,先说jsp用来显示编辑结果参数的这个页面,非常简单。使用了一段被人喷为脑残的jsp脚本来获取参数,实质上,使用xheditor之后,与没有使用,获取一个简单的多行文本编辑框的参数,是一模一样的,你只要设置好这个多行文本框的name,在这个页面,获取这个name就可以了。jsp获取之前还必须设置编码!
2、edit.jsp,这是放置xheditor文本编辑器的页面,这是关键。不过也不难,首先在页头引入三个必须的js,这也是xheditor官方要求的,你只要为这个text文本框设置class参数即可。其余的表单、提交按钮,按往常一样写就可以了。xheditor不过是一个多行表单!3、xheditor的class参数设置,可以利用刚才xheditor解压之后的文件夹中的wizard.html生成,你可以利用这个代码生成器,生成你所需要的文本编辑器,省时省力。这个文本编辑器好像来支持文件上传的功能。JSP的文件上传的响应见《【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统,支持图片上传后显示》,之前我做过了,这里不赘述了。xheditor的文件上传按钮是藏在超级链接里面的。我觉得没有必要开放上传,让用户搞外链图片就可以。我现在的编辑器,就是是简约样式、无样式风格,清楚word格式,尺寸为640x300。4、当然,上面的例子只是马上输出用户的功能而已。如果真正放到互联网上去,还需要在表单发表之前,你还需要进行检查,如何检查,我在《【javascript】表单提交之前的前台处理检查三部曲》,存入数据库之前,还应该对用户输入的内容转义,拿出来消除转义,具体可以见《【JavaScript】某些字符不转义可以导致网页崩溃与涉及转义字符的显示方法》。同时还需要在后台处理的时候,考虑到sql注入的问题。毕竟网上那群没事专门黑别人网站的觉得自己好像很牛B似的小混混众多,经常我们这些搞个小网站,混口饭吃的程序猿。
- 【jQuery】网页文本格式编辑器xheditor
- 【jQuery】网页文本格式编辑器xheditor
- 【jQuery】简单的网页文本格式编辑器ckeditor
- xheditor文字编辑器(jquery)
- xheditor文本编辑器使用总结
- 富文本编辑器XHEditor实现
- xhEditor轻巧强大的文本编辑器
- xheditor文本编辑器的简单实用介绍
- xheditor java版富文本编辑器
- Flask项目集成富文本编辑器XHEditor
- 如何使用富文本编辑器xheditor
- xhEditor富文本编辑器的使用说明
- SpringBoot 配置富文本编辑器 xheditor
- jsp页面集成xhEditor文本编辑器
- 基于jquery的在线编辑器XHEditor
- 基于jquery的在线编辑器XHEditor
- 关于Jquery 编辑器 xhEditor的使用总结
- asp.net留言板 利用富文本编辑器实现美化功能xheditor在asp.net网页的配置和使用
- 奋战聊天机器人(五)从一句话中提取更多信息
- XML文件结构和基本语法
- 按时间删除数据报错的解决办法(Incorrect datetime value: '%2017-07-31%' for column 'orderDate' at row 1)
- 二分查找
- 观察者模式随笔
- 【jQuery】网页文本格式编辑器xheditor
- Oracle 删除重复数据只留一条
- 《终极网络服务端编程》的lua server 源码
- spring04
- iOS之JSPatch
- Azkaban-2.5.0的安装和配置
- 华为宣讲会记录,各个部门的人工智能的分工
- python3 爬虫—爬取天气预报多个城市七天信息(三)
- 从零开始写一个框架的详细步骤