FckEditor 是一种建立在多平台 多语言的富文本编辑器,很通用.所以很多系统中用到这个FckEditor很划算.
昨天下午在整理FckEditor一个数据绑定时出现一种JavaScript未结束的常量异常,导致从数据库读取出的数据无法显示在Fck编辑器中,在网上收集一定资料单总感觉不太满意,下午利用半个小时间整理一种简洁 通用处理数据过滤方法.
(1):没有经过过滤的处理,绑定FCkEditor会抛出JS脚本错误
-- Author:chenkai Time: 2009 - 6 - 4 8 : 54 : 18
-- Result:定义FckEditor -- 详细代码
< script type = " text/javascript " >
// 设定唯一标识:P_content 宽度和高度
var oFCKeditor = new FCKeditor( ' P_content ' , ' 100% ' , ' 360 ' );
oFCKeditor.Create();
</ script >
-- Aspx页面在提交表单验证提交数据时,绑定FckEditor - (未作过滤处理)
-- Result:会提示一个JS脚本错误:未结束的字符窜常量
< script language = " javascript " type = " text/javascript " charset = " UTF-8 " >
$( " #modifyForm " ).ready(function() {
$( " #P_title " ).val( ' <%=this.EditorRule.Title.ToString() %> ' );
// 向FckEditor中绑定数据
$( " #P_content " ).val( ' <%=this.EditorRule.Content.ToString() %> ' );
</ script >
上面处理方式是未对绑定FckEditor数据进行处理,而导致提示一个JS脚本错误 结果数据无法显示在Fck编辑器中,我们来看看MSDN中关于JS未结束的字符窜常量如何解释:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
到了这里问题就有点方向:可能是因为在向FckEditor编辑器绑定数据时,有些字符因为单双引号的引用不匹配,导致整个字符窜没有结束,而做出这样的JS脚本错误提示.在详细看JS中具体提示这样的错误原因几种分类:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
具体的Js中做出提示就是上面集中常见原因,我们来看看官方网站上关于FckEditor 演示Demo中是如何处理编码的,可以按照正确情况下做参考,
FckEditor官方网站Demo:http://www.fckeditor.net/demo
输入数据,做了三种简单处理 加粗 深红色 换行,
点击Submit时会把编辑器产生编码显示在一个结果网页,而当前这个编码就是我们在数据库存储的Fck编辑过的字符,来看下结果:
发现也就是正常显示Html标签和是输入内容,而我们在绑定时丛数据库读取的就上面数据, 问题关键在于包含了Html标签的,我们在回过头看看出现Js中未结束字符窜常量原因中第三条,Html标签或换行符也会导致这种情况.在查看当前页面的源文件看看在页面显示时编码:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
问题就出现在这里:通过Fck编辑器后编辑后数据显示页面并非直接Html标签,而是通过转译后字符来定义Html标签,当我们绑定数据时从数据库读取的是直接包含Html的数据,这样就导致其中<p> <strong>等等这些HTml标签无法识别 提示整个字符窜常量没有结束 以致无法绑定显示数据在Fck编辑器中,解决方法如下:
只需把当前从数据库读取数据进行转译替换再绑定,从上面数据可以看出需要转换三种编码:左括号(<),右括号(>),冒号(:)三种,分别对应的编码是:左括号(<), 右括号(>),冒号("),注意在转换替换时" 这个编码分号不能丢了 否则会出现编码错误.提供代码仅作参考:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
经过测试 处理后再次从后台读取数据并绑定到页面,没有提示JS未结束字符串脚本错误,而且Fck编辑器掌控能够显示可编辑.临时写得匆忙 其中多少有一定的纰漏,欢迎拍砖 指出我会加以修改,愿能够遇到这方面问题的朋友 提示一定帮助.