JSP页面引入Ueditor富文本编辑器!

最近做项目时,需要用到富文本编辑器,使用了百度的Ueditor编辑器,因此 在这和大家分享下

工具/原料

  • myeclipse,ueditor

方法/步骤

  1. 从官网上 http://ueditor.baidu.com/website/download.html

    下载下JSP版

    JSP页面引入Ueditor富文本编辑器(1)



  2. 解压 将ueditor1_4_3_3-utf8-jsp\utf8-jsp\jsp\lib路径下的jar到自己项目的lib包下;将压缩包重命名放到WedRoot(Web)下;将<head></head>标签内,添加如下图二的四句话

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

    src为插入文件的相对路径。

    JSP页面引入Ueditor富文本编辑器(1)





JSP页面引入Ueditor富文本编辑器(1)

在页面的需要的位置插入

<div id="editor" style="height:360px">      <script type="text/javascript" charset="utf-8">      UE.getEditor('editor');      </script>   </div>

<div>的id需要和getEditor里的一致;这样就引进来了。

JSP页面引入Ueditor富文本编辑器(1)



JSP页面引入Ueditor富文本编辑器(1)

若觉得富文本默认的标签,过多可以使用toolbars (UE.getEditor('editor',{toolbars:[['fullscreen', 'source', 'undo']]});)自己添加 ,具体的可以参见 http://fex.baidu.com/ueditor/#start-config 和ueditor的API

JSP页面引入Ueditor富文本编辑器(1)
















此外,自定义富文本还可以修改ueditor.config.js中toolbars的内容,可以在此处根据自己的需求增删

JSP页面引入Ueditor富文本编辑器(1)






  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值