Ueditor编辑保存的内容网页显示时背景等信息无效果---参考UEditor官方文档之编辑内容展示

来源：互联网发布：git mac客户端编辑：程序博客网时间：2024/04/30 16:03

背景

大家使用 UEditor 是为了让用户能在页面中编辑富文本内容，但这应该只是手段方法。我们最终的目的是为了呈现用户编辑的内容。也就是内容的展示。原来我们对这块是不考虑的，只关注在编辑端。但随着编辑器产出内容的增加和复杂化，比如图表展示，代码高亮，自定义的列表标号等等，如果都在最终产出的编辑数据中处理，那势必会导致产出数据带有冗余内容，而且也很大程度上硬编码了展示时定制效果。基于这些问题，uparse产生了。

uparse的定义

基于js的实现机制，在展示页面中，对 UEditor 的产出的编辑数据，进行解析和转换，以呈现不同的效果。为后边的多端（移动端和pc端）展示打下基础。

uparse的作用

它会根据内容展示内容，动态的在你的展示页中加入css代码,比如你的编辑数据中有表格，那就会加入一些表格的css样式,如果有图表数据，会调用相关的js插件，解析数据成为图表等。

uparse的使用

在下载包中找到ueditor.parse.js或者uparse.js(这两个没有区别，就是版本不同，功能是一致的).完整版本的包中，ueditor.parse.js是没有打包编译的，需要进行编译，编译相关的请看编译文档。从1.3.5开始，uparse做了重构，将原来的一个文件拆解成了多个插件形式的js,为了适应越来越多的功能需求。parse.js是核心文件，定了插件的管理机制和一些快捷方法，感兴趣的同学可以看一下。其他文件代表的一种数据解析功能，比如insertcode.js是针对的数据里边的代码进行展示时的解析等等。看到这里，大家应该能想到，uparse是需要依赖ueditor项目中的third-party中相关的第三方库的。

根据你的路径加载uparse.js

<span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><head></span><span class="pln" style="color:#ffffff;">    </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><meta</span><span class="pln" style="color:#ffffff;"> </span><span class="atn" style="color:#bdb76b;FONT-WEIGHT: bold">http-equiv</span><span class="pun" style="color:#ffffff;">=</span><span class="atv" style="color:#ffa0a0;">"Content-Type"</span><span class="pln" style="color:#ffffff;"> </span><span class="atn" style="color:#bdb76b;FONT-WEIGHT: bold">content</span><span class="pun" style="color:#ffffff;">=</span><span class="atv" style="color:#ffa0a0;">"text/html;charset=utf-8"</span><span class="pln" style="color:#ffffff;"> </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold">/></span><span class="pln" style="color:#ffffff;">    </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><script</span><span class="pln" style="color:#ffffff;"> </span><span class="atn" style="color:#bdb76b;FONT-WEIGHT: bold">src</span><span class="pun" style="color:#ffffff;">=</span><span class="atv" style="color:#ffa0a0;">"../ueditor.parse.js"</span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold">></script></span><span class="pln" style="color:#ffffff;">    </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><title></title></span><span class="pln" style="color:#ffffff;"></span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"></head></span>

将uparse.js记载到页面，不同目录结构，路径不同.

当加载了uparse.js后，就可以调用uParse这个函数，执行内容解析了。

<span class="com" style="color:#87ceeb;">//uParse的语法</span><span class="pln" style="color:#ffffff;"></span><span class="com" style="color:#87ceeb;">//uParse(cssSelector,[options])</span>

cssSelector，是告诉uParse你将编辑数据放到那个容器里了，比如你放到一个div里

<span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><div</span><span class="pln" style="color:#ffffff;"> </span><span class="atn" style="color:#bdb76b;FONT-WEIGHT: bold">id</span><span class="pun" style="color:#ffffff;">=</span><span class="atv" style="color:#ffa0a0;">"content"</span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold">></span><span class="pln" style="color:#ffffff;">    </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><p></span><span class="pln" style="color:#ffffff;">dsfsdF</span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"></p></span><span class="pln" style="color:#ffffff;">    </span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"><p></span><span class="pln" style="color:#ffffff;">sdsdf</span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"></p></span><span class="pln" style="color:#ffffff;"></span><span class="tag" style="color:#f0e68c;FONT-WEIGHT: bold"></div></span>

cssSelector就是#content,现在支持3种格式,tag,id,class.也就是你可以渲染页面中多个地方。options是个json对象。基于1.3.5版本，可配置的参数。

<span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">    rootPath</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">''</span><span class="pun" style="color:#ffffff;">,</span><span class="pln" style="color:#ffffff;"> </span><span class="com" style="color:#87ceeb;">//ueditor所在的路径，这个要给出，让uparse能找到third-party目录</span><span class="pln" style="color:#ffffff;">    </span><span class="com" style="color:#87ceeb;">//因为需要引入目录下的那些js文件，当然会根据你的编辑数据，按需加载</span><span class="pln" style="color:#ffffff;">    liiconpath</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">'http://bs.baidu.com/listicon/'</span><span class="pun" style="color:#ffffff;">,</span><span class="pln" style="color:#ffffff;"> </span><span class="com" style="color:#87ceeb;">//自定义列表标号图片的地址，默认是这个地址</span><span class="pln" style="color:#ffffff;">    listDefaultPaddingLeft</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">'20'</span><span class="pln" style="color:#ffffff;"> </span><span class="com" style="color:#87ceeb;">//自定义列表标号与文字的横向间距</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">}</span>

一般只要给个rootPath就够了，其他的都可以使用默认值。一般在页面底部加入如下代码

<span class="pln" style="color:#ffffff;">uParse</span><span class="pun" style="color:#ffffff;">(</span><span class="str" style="color:#ffa0a0;">'.content'</span><span class="pun" style="color:#ffffff;">,</span><span class="pln" style="color:#ffffff;"> </span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">    rootPath</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">'../'</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">})</span>

这个表示对于className是content的容器里边的内容进行解析。注意：正如uParse方法第一个参数是cssSelector(选择器)，因此如果我们是通过id选择的话，就用#content

小结

我们是建议用户使用uparse来解析展示页中的数据的，当然你也可以给出自己针对某些标签的自定义样式，这个跟uparse是不冲突的.随着可编辑内容的丰富和复杂，展示数据也会变得越来越复杂和难以维护，而且多端展示的需求也越来越强烈。展现数据会变得需要做更多的事情。欢迎大家跟我们进行探讨。

0 0