js插件---->ueditor编辑器的使用
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。今天我们就开始学习一下。大致的效果图如下
UEditor的jsp环境搭建
一、下载ueditor,url地址:http://ueditor.baidu.com/website/download.html#ueditor
这里我下载的是jsp版本的uft-8,目前ueditro仅支持上述4种语言的环境。
二、ueditor在eclipse上的部署
- 在eclipse部署tomcat环境,这个就不多做介绍,Preferences --> Runtime Environment --> add --> 选择tomcat的安装目录。如下
- 在Eclipse中创建一个名为JspUeditor的Dynamic Web project项目:
- 将解压后ueditor的相关资源导入到项目中,在项目下的“WebContent”目录上右击,在弹出的菜单中选择:Import->Import...,弹出如下图所示对话框:
选择File System,在browse中选择ueditor的解压路径,如下:
将webcontent-->jsp下的lib下的jar包复制到WEb-INF下的lib文件夹下,之后删除jsp下的lib文件夹
- 添加该项目到Tomcat中,并启动Tomcat。在浏览器运行:http://localhost:8080/JspUeditor/jsp/controller.jsp?action=config得到如下界面,表示成功
- 运行http://localhost:8080/JspUeditor/index.html会得到以下界面:
- 在ie8上,使用ueditor出现错误: 'document.body' 为空或不是对象。
解决方案: 把var ue = UE.getEditor('editor')等代码放在</body>前面且包含在<body>中。
ueditor的基础使用
一、 在jsp页面中引入ueditor的支持:
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
二、 在jsp页面中定义:
<div> <script id="editor" type="text/plain" style="width:980;height:500px;"></script> <input type="hidden" id="ProductContent" name="ProductContent" value=""/> </div>
三、 在js中初始化ueditor:
<script type="text/javascript"> UE.getEditor('editor'); </script>
四、 得到ueditor的数据,并且提交表单:
function doIt(clickObj){ document.forms[0].ProductContent.value = UE.getEditor('editor').getContent(); document.forms[0].action="DirectFinanceAgreementAdd.do"; document.forms[0].submit(); }
五、在ueditor.config.js中可以配置一些ueditor的特性。比如可以输入的字数上限、菜单的显示等等。
友情链接
- ueditor的使用文档:http://fex.baidu.com/ueditor/
- ueditor的api文档: http://ueditor.baidu.com/doc/
作者:
huhx
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。