Ueditor 有序列表与无序列表

最近项目中使用到百度编辑器ueditor,在开发完成后,进行测试,发现了几个问题。其中一个就是这个有序列表与无序列表的插入。插入自定义的序号,如(1)(2)…,还有无序中的小圆点。这时就不会显示了,在门户展示编辑器内容时就更不显示了。本来想放弃这个修改,找了两天也没有找到,终于有一天,突然发现了情况。下面就来具体说一下,如何实现自定义列表吧。

1、首先要去官网下载自定义的资料包。地址如下http://ueditor.baidu.com/website/download.html

这里写图片描述

下载的包中有个使用说明,按照上面做就可以了。

列表文件本地化使用说明:
1、解压放到你的themes/文件夹下(可以按照需求放置路径)
2、修改editor_config.js文件,修改listiconpath配置项:
    listiconpath : URL+'themes/ueditor-list/'  //如果是自己的目录,请使用  '/'开头的绝对路径
3、在发布文章的页面,引用uparse.js,并运行 uParse 函数,传入列表路径:
    <script type="text/javascript">
    uParse('.content',{
        'liiconpath':'/projectName/ueditor/themes/ueditor-list/'    //使用 '/' 开头的绝对路径
    })
    </script>

说明:从1.3.5开始,uparse做了重构,将原来的一个文件拆解成了多个插件形式的js,为了适应越来越多的功能需求。这其中就包括uparse.js。在我的项目中是引用的ueditor.parse.js,这个在官网下载jsp的包,里面就有这个,这里的功能比较全面。
这里写图片描述
2、修改ueditor.config.js
大概在187行左右,如下图,我作了修改

这里写图片描述

说明:这里的URL,我是这样配置的,大概在23行左右。

var URL = window.UEDITOR_HOME_URL || "/projectName/ueditor/";

3、修改ueditor.parse.js
这里很重要,花了好长时间才找到这里的。不然门户页面展示时,就获取不到标号图片了。大概在907行,修改如下
这里写图片描述

4、门户页的展示
我引入以下文件

这里写图片描述

 <script type="text/javascript">
 uParse('.next_text', {
            rootPath: '<%=request.getContextPath()%>/'
        })
 </script>

就说到这里了,页面上已经可以使用自定义的标号了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值