百度已经开发出了一套强大的文本编辑器ueditor,很爽很方便,请看--------
web文本编辑器被广泛的使用在论坛,留言系统,微博等网站,凡是用户能发布文字的网站,几乎到会使用到文本编辑器,老卢今天给大家介绍一款中国人自己开放的开源文本编辑器,全球最大中文搜索引擎--百度推出的UEditor。Ueditor是由百度web前端研发部开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码.详细可参见网站:
http://ueditor.baidu.com/index.html 。最新版1.4.3.1,可以在JSP,PHP,ASP等网站使用。
1)下载ueditor
访问这个网址: http://ueditor.baidu.com/index.html,找到下载
然后下载你需要的编码方式和版本
2) 解压后我们会看到以下文件,其中:
官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:
_examples:编辑器完整版的示例页面
_demos:编辑器的各种使用案例
dialogs:弹出对话框对应的资源和JS文件
themes:样式图片和样式文件
server:涉及到服务器端操作的PHP、JSP等文件
third-party:第三方插件
editor_all.js:_src目录下所有文件的打包文件
editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用
editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录
3) 在你的web工程或网站根目录下,新建一个名称叫ueditor文件夹。复制所有这些文件夹和js到这个文件夹
到此准备工作完成
4) 在JSP页面包含所需要的JS和css
<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../ueditor/ueditor.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="../ueditor/themes/default/css/ueditor.css" />
在此注意:引用的js或css必须正确,否则显示不出来
我的ueditor文件夹和页面展示vm文件不同根目录,vm多一个层级,所以写成以上。
5) 添加编辑器
<body>
<form action="dopost.jsp" method="post">
<script type="text/plain" id="myEditor" class="myEditor">
</script>
<input type="submit" value="发帖">
</form>
<script language="javascript" type="text/javascript">
var op = {
initialContent: '默认值。。。。。', //初始化编辑器的内容
initialFrameWidth : 1000, //设置默认宽度
initialFrameHeight: 800 //设置默认高度
};
var editor = new baidu.editor.ui.Editor(op);
editor.render('myEditor');
</script>
</body>
6) 在另一个jsp或servlet中接收提交的数据
<%
//表单提交到了dopost.jsp,编辑器中编写的内容默认名称是editorValue
//所以通过request.getParameter("editorValue")可以得到
//接收到数据后打印到后台,你可以把它保存到数据库中。
System.out.println(request.getParameter("editorValue"));
%>