最近项目中使用到百度编辑器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>
就说到这里了,页面上已经可以使用自定义的标号了。