欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ueditor 有序列表与无序列表

程序员文章站 2022-04-02 21:25:26
...

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

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

Ueditor 有序列表与无序列表

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

列表文件本地化使用说明:
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、修改ueditor.config.js
大概在187行左右,如下图,我作了修改

Ueditor 有序列表与无序列表

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

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

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

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

Ueditor 有序列表与无序列表

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

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

相关标签: 编辑器 百度