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

燕山网络科技2021-09-1457

发布这篇文章的目的在于,测试文章详情页的自带的CSS样式是否适配UEditor编辑器发布的内容。

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

1、加粗

详情页 适配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是一款基于jQueryHTML5+CSS3开发的前端框架


8、背景色

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

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


9、有序列表

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

1、2、3……

  1. 第一行文字

  2. 第二行文字

  3. 第三行文字

  4. 第四行文字

  5. 第五行文字

  6. ……


a、b、c……

  1. 第一行文字

  2. 第二行文字

  3. 第三行文字

  4. 第四行文字

  5. 第五行文字

  6. ……


有序列表还有更多选项,如下图所示:

详情页 适配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

详情页 适配UEditor编辑器发布的内容  建站  第20张详情页 适配UEditor编辑器发布的内容  建站  第21张详情页 适配UEditor编辑器发布的内容  建站  第22张详情页 适配UEditor编辑器发布的内容  建站  第23张详情页 适配UEditor编辑器发布的内容  建站  第24张详情页 适配UEditor编辑器发布的内容  建站  第25张详情页 适配UEditor编辑器发布的内容  建站  第26张详情页 适配UEditor编辑器发布的内容  建站  第27张详情页 适配UEditor编辑器发布的内容  建站  第28张详情页 适配UEditor编辑器发布的内容  建站  第29张详情页 适配UEditor编辑器发布的内容  建站  第30张详情页 适配UEditor编辑器发布的内容  建站  第31张详情页 适配UEditor编辑器发布的内容  建站  第32张详情页 适配UEditor编辑器发布的内容  建站  第33张详情页 适配UEditor编辑器发布的内容  建站  第34张详情页 适配UEditor编辑器发布的内容  建站  第35张

default

详情页 适配UEditor编辑器发布的内容  建站  第36张详情页 适配UEditor编辑器发布的内容  建站  第37张详情页 适配UEditor编辑器发布的内容  建站  第38张详情页 适配UEditor编辑器发布的内容  建站  第39张详情页 适配UEditor编辑器发布的内容  建站  第40张详情页 适配UEditor编辑器发布的内容  建站  第41张详情页 适配UEditor编辑器发布的内容  建站  第42张详情页 适配UEditor编辑器发布的内容  建站  第43张详情页 适配UEditor编辑器发布的内容  建站  第44张详情页 适配UEditor编辑器发布的内容  建站  第45张详情页 适配UEditor编辑器发布的内容  建站  第46张详情页 适配UEditor编辑器发布的内容  建站  第47张详情页 适配UEditor编辑器发布的内容  建站  第48张详情页 适配UEditor编辑器发布的内容  建站  第49张详情页 适配UEditor编辑器发布的内容  建站  第50张详情页 适配UEditor编辑器发布的内容  建站  第51张详情页 适配UEditor编辑器发布的内容  建站  第52张详情页 适配UEditor编辑器发布的内容  建站  第53张


16、超链接

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

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

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

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


17、多图上传

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

在文章中插入图片:

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


18、涂鸦

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

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

点击涂鸦按钮显示画板:

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

看看我画的:

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


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张

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

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


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、引用

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

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


25、表格

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

这是一个完整的表格

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


26、分割线

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


以上的横线就是分割线!


【本文完】


本文链接:https://www.hnysnet.com/wangzhan/4640.html 转载需授权!

网友评论

分享

复制链接

燕山网络科技在线咨询

上班时间:9:00-22:00
周六、周日:14:00-22:00
wechat
扫一扫二维码,添加客服微信

15639981097

上班时间:9:00-22:00
周六、周日:14:00-22:00

扫一扫二维码,添加客服微信