Ueditor 有序列表与无序列表

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

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

Ueditor 有序列表与无序列表_第1张图片

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

列表文件本地化使用说明:
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的包,里面就有这个,这里的功能比较全面。
Ueditor 有序列表与无序列表_第2张图片
2、修改ueditor.config.js
大概在187行左右,如下图,我作了修改

Ueditor 有序列表与无序列表_第3张图片

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

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

3、修改ueditor.parse.js
这里很重要,花了好长时间才找到这里的。不然门户页面展示时,就获取不到标号图片了。大概在907行,修改如下
Ueditor 有序列表与无序列表_第4张图片

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

这里写图片描述

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

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

你可能感兴趣的:(java)