在这一节我们将实现科技改变生活这个模块，并且向广大的Joomla爱好者揭示Joomla自定义HTML模块的一个BUG.
1，本节目标
使用自定义HTML模块来实现科技改变生活这个模块
2，奇怪的BUG
目标网站的科技改变生活这一部分是使用自定义HTML来做的。因此，我们直接在模块管理中新建一个自定义HTML模块，在模块中录入内容即可。但实际的操作，可能会让你很疑惑。
首先我们来看一下目标网站的“科技改变生活”模块：
在这个模块的下面出现了一行小字，“注意：请使用codemirrow编辑器来编辑该模块”
这是什么意思？为什么这个模块下有一行字，其他的模块没有呢？
为了搞清楚这个问题，我们首先来看一下（TinyMCE编辑器）模块内容。截图如下：
如果对比前台显示效果大家可能会看出一点什么
你可以看到，后台的文字和前台显示的都对上了，但是文字上的图标却没有出现。这个是为什么呢？
做过网页的都知道，图标是使用字体来做出来的，现在已经有很多的开源字体图标库了，并且joomla也自带了一个字体图标库，我们要做的就是在需要的地方引用这个图标。
引用图标的办法 一般使用 <i class="icon icon-home"></i> <span class="icon icon-home"></span> 之类的标签。这些代码只能在源码中被查看。
那么我点击编辑下方的切换编辑器，来看看此时模块的源码，截图如下：
如果你有过HTML的使用经验，那么就可以很快的看到问题的所在了。这个上面没有 插入字体图标的代码。依据代码不会说谎的原则，此时，系统不可能在前台显示图标的。但实际上，我们的模块在前台真的显示了图标了。难道代码说谎了？这是一个很有意思的问题，可以和大家讨论一下。
代码不会说谎，如果在前台显示了字体图标的代码，那么说明我们这个模块的自定义HTML中一定有对应的代码。（大家可以通过查看页面源码来确认）。那么问题出在了什么地方呢？
实际上是编辑器的问题，当我们要编辑这个模块的额时候，系统会从数据库中读取这个模块的数据，然后这些数据会经过编辑器的处理，最后展现给我们。在Joomla中，编辑器会过滤掉<i><span>等空白标签，（
我认为这是非常不明智的） ，所以当我们使用TinyMCE编辑打开的时候就看不到了。
最神奇的时候，发生在下面。如果此时你不点击保存，那么一切都可以正常，一旦你点击了保存，你再次刷新前台界面后，你将会看到页面都被变了。
虽然，你什么都没有修改，但这个模块显示的内容已经和之前不一样了（因为系统存储了被编辑器处理过的代码了）。这就是为什么在某一些模板中，当仅仅是修改了模块的位置，保存按钮后，前台界面发生奇怪变化的原因了。
3，如何解决？
那么如何解决这个问题呢？使用codemirror编辑器或者none编辑器。
前往系统 ->全局设置 前台编辑器设置中更换编辑为cideNurrir或者none均可。如图：
保存完成后，我们再次编辑模块，你就会看到最终的代码了：
在这种编辑器模式下，你的修改才会被系统原封不动的保存。
由于这种编辑器是直接显示源码的，不利于编辑文章，所有，在编辑完模块后，建议你将其修改会TinyMCE编辑器。
评论 (0)