详情页-适配UEditor编辑器发布的内容

燕山网络科技2021-09-14 09:29:262314

发布这篇文章的目的在于，测试文章详情页的自带的CSS样式是否适配UEditor编辑器发布的内容。
你也可以复制我们这篇文章的代码^{右键查看网页源代码}，放在你自己网站后台的文章编辑中^{html模式下粘贴}，发表文章后，测试你使用的网站模板文章详情页自带的CSS样式是否支持UEditor编辑器发布的内容。

1、加粗

燕雀UI是一款基于jquery+ HTML5+CSS3开发的前端框架。

2、斜体

详情页适配UEditor编辑器发布的内容建站第2张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

3、下划线

详情页适配UEditor编辑器发布的内容建站第3张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

4、删除线

详情页适配UEditor编辑器发布的内容建站第4张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

5、上标

详情页适配UEditor编辑器发布的内容建站第5张

燕雀UI^{是一款基于jQuery+ HTML5+CSS3开发的前端框架}。

6、下标

详情页适配UEditor编辑器发布的内容建站第6张

燕雀UI_{是一款基于jQuery+ HTML5+CSS3开发的前端框架}。

7、字体颜色

详情页适配UEditor编辑器发布的内容建站第7张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

8、背景色

详情页适配UEditor编辑器发布的内容建站第8张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

9、有序列表

详情页适配UEditor编辑器发布的内容建站第9张

1、2、3……

第一行文字
第二行文字
第三行文字
第四行文字
第五行文字
……

a、b、c……

第一行文字
第二行文字
第三行文字
第四行文字
第五行文字
……

有序列表还有更多选项，如下图所示：

详情页适配UEditor编辑器发布的内容建站第10张

9、无序列表

详情页适配UEditor编辑器发布的内容建站第11张

大圆圈

第一行文字
第二行文字
第三行文字
第四行文字
第五行文字
……

小方块

第一行文字
第二行文字
第三行文字
第四行文字
第五行文字
……

无序列表还有更多选项，如下图所示：

详情页适配UEditor编辑器发布的内容建站第12张

10、居左对齐

详情页适配UEditor编辑器发布的内容建站第13张

所有内容默认都是居左显示。

10、居中对齐

详情页适配UEditor编辑器发布的内容建站第14张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

11、居右对齐

详情页适配UEditor编辑器发布的内容建站第15张

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

12、标题2（h2）——标题6(h6)

详情页适配UEditor编辑器发布的内容建站第16张

为什么不用标题1（h1）?

文章标题默认使用的h1标签，因此在文章内容中不建议再插入标题1（h1），

标题2（h2）显示效果

标题3（h3）显示效果

标题3（h3）在文章中的应用频率最高，本文中就大量的使用了标题3（h3）。

标题4（h4）显示效果

标题5（h5）显示效果

标题6（h6）显示效果

13、字体

详情页适配UEditor编辑器发布的内容建站第17张

宋体：燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

微软雅黑：燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

微软雅黑是在网页中应用最多的字体。

楷体：燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

黑体：燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

隶书：燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

还有其他英文字体选项，但是中文网站一般用不到，不再一一演示。

14、字号

详情页适配UEditor编辑器发布的内容建站第18张

啧啧！字号没什么好测试的。

15、表情

详情页适配UEditor编辑器发布的内容建站第19张

face

default

16、超链接

在编辑器中选中文字，再点击超链接按钮，设置以下选项：

带有超链接的文字：点击访问燕山网络科技官网

17、多图上传

详情页适配UEditor编辑器发布的内容建站第56张

在文章中插入图片：

详情页适配UEditor编辑器发布的内容建站第57张

18、涂鸦

详情页适配UEditor编辑器发布的内容建站第58张

哈哈，没想到用编辑器还能画画呢!

点击涂鸦按钮显示画板：

详情页适配UEditor编辑器发布的内容建站第59张

看看我画的：

19、视频

详情页适配UEditor编辑器发布的内容建站第61张

20、附件

详情页适配UEditor编辑器发布的内容建站第62张

支持上传几十种格式的文件，以下仅添加几种常用的文件格式用作演示！

.rar

详情页适配UEditor编辑器发布的内容建站第63张 rar压缩包.rar

.zip

详情页适配UEditor编辑器发布的内容建站第64张 zip压缩包.zip

.txt格式

详情页适配UEditor编辑器发布的内容建站第65张 txt演示文本.txt

.doc格式

详情页适配UEditor编辑器发布的内容建站第66张电脑快捷键大全打印.doc

.docx格式

详情页适配UEditor编辑器发布的内容建站第67张 docx演示文档.docx

.ppt格式

详情页适配UEditor编辑器发布的内容建站第68张 ppt演示文档.ppt

.xsl格式

详情页适配UEditor编辑器发布的内容建站第69张 xls演示表格.xls

.xlsx格式

详情页适配UEditor编辑器发布的内容建站第70张 xlsx演示表格.xlsx

21、特殊字符

详情页适配UEditor编辑器发布的内容建站第71张

点击特殊字符按钮，可以选择特殊字符插入到编辑器中。

22、百度地图

详情页适配UEditor编辑器发布的内容建站第73张

在文章中插入百度地图，可以指定显示的位置。

23、代码语言

详情页适配UEditor编辑器发布的内容建站第74张

在文章中插入代码语言，支持33种代码语言。

在文章中插入html代码语言演示效果：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 
<title>网站标题，控制在25个字、50个字节以内</title> 
<meta name="keywords" content="关键词,5个左右,单个8汉字以内"> 
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！"> 
<link rel="Bookmark" href="favicon.ico" > 
<link rel="Shortcut Icon" href="favicon.ico" /> 
<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
<link href="style/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-yanque-1.0.js"></script>
<![endif]--> 
</head> 
<body>
<header>网站头部</header>
<div>内容部分</div>
<footer>页脚</footer>
</body>
</html>

24、引用

燕雀UI是一款基于jQuery+ HTML5+CSS3开发的前端框架。

25、表格

详情页适配UEditor编辑器发布的内容建站第76张

这是一个完整的表格

序号	标题	介绍
1	项目名称	这是一段项目介绍的文字
2	项目名称	这是一段项目介绍的文字
3	项目名称	这是一段项目介绍的文字
4	项目名称	这是一段项目介绍的文字