• 关于FckEditor基于Asp.net MVC中出现未结束的字符窜常量——解决方案


    FckEditor 是一种建立在多平台 多语言的富文本编辑器,很通用.所以很多系统中用到这个FckEditor很划算.

    昨天下午在整理FckEditor一个数据绑定时出现一种JavaScript未结束的常量异常,导致从数据库读取出的数据无法显示在Fck编辑器中,在网上收集一定资料单总感觉不太满意,下午利用半个小时间整理一种简洁 通用处理数据过滤方法.

    (1):没有经过过滤的处理,绑定FCkEditor会抛出JS脚本错误

    --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未结束的字符窜常量如何解释:

    --MSDN -JS1015:未终止的字符串常数
    --Address:http://msdn.microsoft.com/zh-cn/library/e66hs8aw.aspx

    一个字符串常数缺少右引号,字符串常数必须用一对引号引起

    可以使用匹配的单引号或双引号,
    被单引号引起的字符串内可以包含双引号,而被双引号引起的字符串内也可以包含单引号.

    也就是单双引号是可以互相引用的,问题关键在于——匹配

      到了这里问题就有点方向:可能是因为在向FckEditor编辑器绑定数据时,有些字符因为单双引号的引用不匹配,导致整个字符窜没有结束,而做出这样的JS脚本错误提示.在详细看JS中具体提示这样的错误原因几种分类:

    --JS中提示未结束字符窜常量几种具体原因
    --Author:chenkai  Time:2009-6-4 9:21:59

    1.JAVASCRIPT引用时,使用的字符语言不一致.
    比如:
    <script type=”text/javascript” src=”xxx.js” charset=”UTF-8>.xxx.js文件内部使用的是GB2312的格式,外面调用使用的是UTF-8,所以文件内部部分特殊字符因为格式不一致,出现乱码,造成此原因. 
    处理方法:修改方式改变当前JS文件  外部调用编码格式Charset的设置  

    2.JAVASCRIPT输出HTML字符时,前后标记不匹配.
    这种比较常见,往往在输出字符串时,出现单引号(’)或双引号(”)不配对,或者是在document.write()的时候,没有正确输出单引号(’)或双引号(”)

    这个就是刚才在 上面进行猜测一种情况,常用Js朋友一定能感觉到  这个很常见一种原因

    3.参数内出现HTML标记语言或包含换行符
    我今天所遇到的是这种情况.因为我所得到的数据以参数形式传给一函数,结果该数据里包含换行符,造成了此错误.
    如:一般测试时只使用单行的数据,是正常的,未出现这个错误,.
    当测试时使用多行数据,并使用回车链换行,就出行了此错误.因为里面包含了换行符

    这个最为容易让人忽略,也是常见一种Js错误

    具体的Js中做出提示就是上面集中常见原因,我们来看看官方网站上关于FckEditor 演示Demo中是如何处理编码的,可以按照正确情况下做参考,

    FckEditor官方网站Demo:http://www.fckeditor.net/demo

    输入数据,做了三种简单处理 加粗 深红色 换行,

    点击Submit时会把编辑器产生编码显示在一个结果网页,而当前这个编码就是我们在数据库存储的Fck编辑过的字符,来看下结果:

    发现也就是正常显示Html标签和是输入内容,而我们在绑定时丛数据库读取的就上面数据, 问题关键在于包含了Html标签的,我们在回过头看看出现Js中未结束字符窜常量原因中第三条,Html标签或换行符也会导致这种情况.在查看当前页面的源文件看看在页面显示时编码:

    --在页面显示时编码:只截取核心代码

    <td><pre>&lt;p&gt;&lt;span style=&quot;color: #800000&quot;&gt;&lt;strong&gt;朝鲜特种部队位居世界首位 人数达10W人自多&amp;nbsp; , 而朝鲜人民军的170W常规力量也是世界任何一个&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;&lt;span style=&quot;color: #800000&quot;&gt;&lt;strong&gt;国家无法轻视的, &lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;</pre></td>

    问题就出现在这里:通过Fck编辑器后编辑后数据显示页面并非直接Html标签,而是通过转译后字符来定义Html标签,当我们绑定数据时从数据库读取的是直接包含Html的数据,这样就导致其中<p> <strong>等等这些HTml标签无法识别 提示整个字符窜常量没有结束 以致无法绑定显示数据在Fck编辑器中,解决方法如下:

    只需把当前从数据库读取数据进行转译替换再绑定,从上面数据可以看出需要转换三种编码:左括号(<),右括号(>),冒号(:)三种,分别对应的编码是:左括号(&lt;), 右括号(&gt;),冒号(&quot;),注意在转换替换时&quot;  这个编码分号不能丢了 否则会出现编码错误.提供代码仅作参考:

    --后台处理Fck数据
    --Author:chenkai   Time:2009-6-4 10:04:54

       
    public string RepleaseContentStr()
           
    {
               
    //从数据库读取数据
               others.PolicyRule getrule = this.ViewData["EditorRule"as others.PolicyRule;
                
    //替换包含Html中<>:<——&lt;    >——&gt;   "——&quot; 逐个替换
               string getres = getrule.Content.ToString();
               getres
    =getres.Replace("<""&lt;");
               getres
    =getres.Replace(">""&gt;");
               getres
    =getres.Replace("\"","&quot;");
               return getres;
            }


    经过测试 处理后再次从后台读取数据并绑定到页面,没有提示JS未结束字符串脚本错误,而且Fck编辑器掌控能够显示可编辑.临时写得匆忙 其中多少有一定的纰漏,欢迎拍砖 指出我会加以修改,愿能够遇到这方面问题的朋友 提示一定帮助.

  • 相关阅读:
    CSU 1598 最长公共前缀 (简单KMP或者暴力)
    CSU
    HDU 1711 Number Sequence (KMP简单题)
    HDU 1142 A Walk Through the Forest(最短路+记忆化搜索)
    HDU 1116 Play on Words(欧拉回路+并查集)
    POJ 1384 Intervals (区间差分约束,根据不等式建图,然后跑spfa)
    HDU 1165 Eddy's research II(给出递归公式,然后找规律)
    使用kvm虚拟出Centos6.5系统相关步骤
    netstat命令
    Centos6.5安装和使用docker
  • 原文地址:https://www.cnblogs.com/chenkai/p/1494803.html
Copyright © 2020-2023  润新知