全屏浏览
缩小浏览
回到页首

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的特性。比如可以输入的字数上限、菜单的显示等等。

 

友情链接

 

posted @ 2016-05-23 15:39  huhx  阅读(3787)  评论(0)  编辑  收藏  举报