百度编辑器序号和项目符号不能显示解决

在做论坛、个人网站、办公OA,对于富文本编辑器的使用,业界使用最多、最好的应该是百度编辑器。
在使用百度编辑器做富文本编辑,碰到序号、项目符号,在个性化页面展示不能显示的问题。
简单分析下,将百度编辑器,编辑后的HTML存储,再用于个性化页面显示,对于指定序号和项目符号显示没有相关的样式。
那解决起来就比较简单了,把相关的样式在个性化页面单独添加引用就可以了。

一、查看是什么样式:

二、个性化页面添加list-style-type样式

通过w3school 找到, list-style-type介绍,把相关的项目符号样式添加到个性化页面就可以。

1.设置不同的列表样式:

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

2.浏览器支持

IE Firefox Chrome Safari Opera

所有浏览器都支持
list-style-type 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值
"decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian"

"inherit"。

3.定义和用法
list-style-type
属性设置列表项标记的类型。

4.可能的值
CSS2 的值:

CSS2.1 的值:

disc | circle | square | decimal |
decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |

armenian | georgian | none | inherit

三、处理中文项目符号不显示问题
经过上面处理,关于百度编辑器不能显示序号和项目符号的问题,是不是能解决了?
经过测试,发现对于列表中罗列的样式显示都可以支持,但是对于一些中文的项目符号还是不可以,像(一)、(二)、(三)类似的符号。
那怎么处理呢?在深入分析下,继续查看百度编辑器编辑后的页面显示HTML元素是什么?

1.查看生成页面的样式

发现有什么不同吗?好像是一个背景图片地址奥。http://bs.baidu.com/listicon/list-cn-1-1.gif

地址栏输入看一下:

2.解决方法

经过第一步的分析,那就可以推导出,百度编辑器对于中文项目符号的显示,使用的是一个个图片渲染处理的。
那我们也可以在自己的网站下面新建一个文件夹存放百度的这些图片,在个性化页面处理指向我们自己的文件夹,
以防百度撤掉百度编辑器或项目符号对应的图片放置在另外的服务器;
最简单的处理方式就是,直接用百度编辑器的路劲,在个性化页面加上样式就OK了,让我们再看下。
把生成的页面的HTML全部在记事本中看下,你就明白了:

看见了没,就是把这些关于项目符号的图片加到你的个性化页面,就能解决百度编辑器中文序号和项目符号不能显示的问题。

四、百度编辑器其他问题处理
1.百度编辑器ueditor代码高亮效果前台不显示的解决方法

<link href="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

PS:在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,造成极不美观的效果。于是想尽办法,查找问题,经过不懈努力,终于解决了此问题。

下面来分享下方法:
以下文件需要修改:
/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
打开:shCoreDefault.css
找到81行,
<span
style="font-size: 14px;">.syntaxhighlighter table {  <br><br>  width: 100% !important;  <br><br>    border: 1px solid #c0c0c0 !important;  <br><br>}<br></span>
修改为:
<span
style="font-size: 14px;">.syntaxhighlighter table {  <br><br>  width: 100% !important;
word-break:break-all; 
<br><br>    border:
1px solid #c0c0c0 !important; 
<br><br>}<br></span>

即可实现自动换行,增加了一句:word-break:break-all;代码,意思是:强制打断并换行的意思。

2.插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色
(1). 打开编辑器根目录下面的ueditor.all.js文件,找到:
for (var c = 0; c
< colsNum; c++) {
    html.push(‘<td width="‘ + tdWidth +
‘"  vAlign="‘ + opt.tdvalign +
‘" >‘ + (browser.ie ? domUtils.fillChar : ‘<br/>‘) +
‘</td>‘)
}

改成:
for (var c = 0; c
< colsNum; c++) {
html.push(‘<td style="border:1px
solid #ccc;" width="‘ + tdWidth + ‘"  vAlign="‘ + opt.tdvalign + ‘" >‘
+ (browser.ie ? domUtils.fillChar : ‘<br/>‘) + ‘</td>‘)
}
不同的版本的代码可能略微有点不同。
(2). 在ueditor.all.js文件中找到:
table.setAttribute("data-sort",
cmd == "enablesort" ? "sortEnabled" :
"sortDisabled");
在这句代码下面加一行:
table.setAttribute("style",
"border-collapse:collapse;");
(3). 在ueditor.all.js文件中找到:
return
‘<table><tbody>‘ + html.join(‘‘) + ‘</tbody></table>‘
改为:
return
‘<table style="border-collapse:collapse;"><tbody>‘ +
html.join(‘‘) + ‘</tbody></table>‘ 。
此时,再刷新后台,插入一个表格,就有边框了。
因为改的是ueditor.all.js,所以调用ueditor.all.js才有效,要是调用的ueditor.all.min.js,那么就需要更改ueditor.all.min.js文件了。
这三处代码弄清楚后,要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。

参考文章:
CSS list-style-type 属性
百度编辑器ueditor代码高亮效果前台不显示的解决方法
百度编辑器ueditor插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色

时间: 2024-10-11 12:40:44

百度编辑器序号和项目符号不能显示解决的相关文章

百度编辑器ueditor前台代码高亮无法自动换行解决方法

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的. 解决办法: 找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css 具体的路径根据你的ueditor做改动 找到 代

百度编辑器Ueditor 初始化加载内容失败解决办法

项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(function() { UE.getEditor('editor').setContent('欢迎光临'); }) setContent方法无法加载内容,提示编辑器为空,后来想想,可能是编辑器还没有加载完就执行此脚本导致的.后在网上找资料,可以判断ueditor编辑器完成加载后再加载内容: 核心内容如下 var editor_a = new baidu.editor.ui.E

百度编辑器Ueditor的简单调用

先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.UEDITOR_HOME_URL='__ROOT__/Data/Uedit

夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建(百度编辑器的引入)

我们现在就开始搭建我们的后台栏目页的后台了: 首先创建一个CategoryController.class.php的控制器,让列表页和添加页面显示出来先: 然后就是开始动手修改我们的视图部分了: 我们这样即可跳转到指定的页面了,先来完成列表页的部分: 老规矩现引入css和js和图片,然后开始下一步的操作了,因为我们的后台模版处发现他不能自动折叠,如下所示: 然后就开始写列表页的模版文件了: <!doctype html> <html> <head> <meta c

百度编辑器ueditor的图片地址修正

我用的百度编辑器为1.4.2的,相对于现在这个时间来说是比较新的.之前去的1.3版的,后来更新到1.4之后出现路径问题.因为今天晚上出现特别奇怪的问题,所以特地又整了一遍,发现这玩意还是得自己弄通了好好使.今晚出现的问题是,本机win7可以正常上传,线上centos可以正常上传,测试机是ios的,前几天还可以正常上传,今晚不知道怎么回事,文件上传目录,确认不是权限问题,很奇怪. # 这个是定义百度编辑器的根目录.考虑到安全问题,只能写http://...这种host格式的绝对路径,不能将你项目的

一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器

前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做个插件,任何网站上的技术文章都可以转发收藏 到本博客. 所以打算写个系类:<一步步搭建自己的博客> 一.一步步开发自己的博客  .NET版(1.页面布局.blog迁移.数据加载) 二.一步步开发自己的博客  .NET版(2.评论功能) 三.一步步开发自己的博客  .NET版(3.注册登录功能) 四

[百度编辑器]Ueditor在线管理图片

前言: 今天最近公司在做CMS用到了编辑器,Ueditor是一个很好的选择,非常强大,但是今天遇到了一个很棘手的问题:在线管理图片的页面不能显示我之前上传的图片,调试了一下午终于解决了这个问题,写这篇帖子希望能帮助到其他人.废话结束 想要使用这个插件你需要做这几步: 1.下载UM 或者 UE 地址:http://ueditor.baidu.com/website/index.html 这里UM UM 就是百度编辑器的两个版本,一个功能少,一个功能更多,具体介绍看官方解释吧. 2.创建一个Web工

百度编辑器的Python后台

公司最近要做一个内容管理系统,需要在后台集成一个百度编辑器,考察了一下,都推荐百度编辑器. 百度编辑器在HTML中的嵌入很容易,把给出的样例复制到自己的HTML中即可,我不是前端,但是根据我的测试,应该是要引入JQuery的. 嵌入之后,百度编辑器基本就可以使用了,常见的文本格式都可以保存到数据库中,需要的时候直接取出,格式依然还在,看来我的大业已经完成大半了. 这里需要注意的是,如果展示到前台的文档被转义了,比如<p>显示成了<p>之类的,那么就需要查怎么关闭teplate转义,

百度开源的70+项目

百度,一家让人既爱又恨的企业,血友吧贴吧被卖,魏则西事件的持续发酵,一时间将百度推到了舆论的风口浪尖上.是非对错,我们在这里也不多做评判,本文呢为大家整理了百度开源的70+项目,看看有没有感兴趣的.本文内容综合整理自oschina.github. 1. JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域