m.lom599.com_手机版乐白家网址_乐百家手机首页登录

CKEditor无法验证的解决方案,js框架入门学习指引

作者: 手机版乐白家网址  发布:2019-07-10

1.简介 最近在做一个大型网上银行项目前端的优化,需要使用一个胖客户端的优化,大概思路就是前端通过Ajax 请求去后端获取数据,以Jason的格式返回,然后显示在页面上。由于这个系统非常庞大,胖客户端方案难免需要在客户端写大量的JS代码。我想对于任何团队来说,大量的,非结构化的代码维护起来都非常的不方便。所以BackBone进入了我的视线。
它提供了一种途径可以让你结构化你的JS代码,让你以面向对象的方式来组织你的前端JS代码。这就好比我们在前端应用Domain Driven Design. 我们可以把一个非常大的项目按模块切分。 每个模块里面又可以按照BackBone的要求切分成View,  Model, Router。
通过backbone,你可以把你的数据当作Models,通过Models你可以创建数据,进行数据验证,销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为在model发生变化时,views会很简单的进行自我更新。

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的。

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。响应式导航条就是可以在不同的设备下查看不同的效果。

2.特点 Backbone是一个轻量级的前端框架,用于结构化管理页面中的大量JS,建立与服务器、视图间的无缝连接,为构建复杂的应用提供基础框架。
下面我先简单地阐述下Backbone的主要特点及特性:

前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意。

下面给大家分享代码:

2.1 轻量级 Backbone的源码只有1000行左右(去注释和空行后),文件大小只有16KB,加上依赖库Underscore,也仅有29KB。
你只需要花一点时间,就能轻松了解Backbone内部实现;或编写少量代码,来重载Backbone的部分机制;如果你想在Backbone的基础上做二次开发,也并不是一件复杂的事情。

不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素中的,我没仔细看源代码,试过一种情况就是每一次提交不通过,第二次提交就可以通过的,貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的(这个是猜测,不知道对不对,我对jQuery 和 CKEditor 都不太熟悉,算是拿来就用,有问题就放狗的那种)。

<header role="banner">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



</button>
<a class="navbar-brand" href="index.html">Bootstrappin'</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
</header>

2.2 结构化 Backbone可以轻松将页面中的数据、逻辑、视图解耦,依照Backbone进行代码结构组织,你可以将项目中的数据交互、业务逻辑、用户界面等工作,分配给多个同事同时开发,并能有序地组织到一起。同时,这对于大型和复杂项目的维护开发非常有帮助。

于是在网上找到了解决问题的代码,代码不是我写的,我只是记录一下我遇到的问题,代码非原创。原理就是当编辑器更新了内容之后,立即把内容更新到 textarea 元素。

data-toggle=”collapse” 预期行为

2.3 继承机制 在Backbone中,模块是可以被继承的,你可以通过面向对象的方式将应用中的数据模型、集合、视图有序地组织,让整个架构更加清晰;也可以方便地重载和扩展自定义方法。

CKEDITOR.instances["page_content"].on("instanceReady", function() 
    { 
            //set keyup event 
            this.document.on("keyup", updateTextArea); 
             //and paste event 
            this.document.on("paste", updateTextArea); 

    }); 

    function updateTextArea() 
    { 
        CKEDITOR.tools.setTimeout( function() 
              {  
                $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                $("#page_content").trigger('keyup'); 
              }, 0);  
    } 

图片 1
图片 2
图片 3

2.4 建立与服务器的无缝连接 在Backbone中内置了一套与服务器数据的交互规则(如果你了解REST架构,就能够轻松地理解它们),而数据的同步工作会在Model中自动进行,前端开发人员只需对客户端数据的进行操作,Backbone会自动将操作的数据同步到服务器。
这是件非常有趣的事情,因为服务器数据接口对前端开发者来说是透明的,他们不需要再关心如何和服务器交互。
然而服务器提供的数据接口也需要兼容Backbone的规则,对于一个新的项目来说,我们可以尝试使用这套规则来构建接口。但如果你的项目中已经有一套稳定的接口,你可能会担心接口改造的风险。
没关系,我们可以通过重载Backbone.sync方法来适配现有的数据接口,针对不同的客户端环境,我们还可以实现不同的数据交互方式。例如:用户通过PC浏览器使用服务时,数据会实时同步到服务器;而用户通过移动终端使用服务时,考虑到网络环境问题,我们可以先将数据同步到本地数据库,在合适的时候再同步到服务器。而这些只需要你重载一个方法就可以实现。

目前一切使用正常,算是解决了一个让我头痛的问题。

以上内容是小编给大家介绍的BootStrap响应式导航条实例介绍,希望对大家有所帮助!

2.5 界面事件管理 在MVC中,我们希望能将界面展现和业务逻辑完全分离,但对于用户产生的交互事件(如单击事件),我们却常常通过类似jQuery中的bind方法进行获取和绑定。
Backbone中的视图帮助我们将用户事件和执行方法有序的组织起来,这只需要我们声明一个简单的表达式,例如:

另一种解决思路:

您可能感兴趣的文章:

  • BootStrap创建响应式导航条实例代码
  • Bootstrap每天必学之下拉菜单
  • Bootstrap每天必学之级联下拉菜单
  • Bootstrap 中下拉菜单修改成鼠标悬停直接显示
  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
  • JS组件Bootstrap实现弹出框和提示框效果代码
  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
  • Bootstrap每天必学之弹出框(Popover)插件
  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
  • bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
events: { 
  // 单击id为”save”的元素时,执行视图的add方法 
  'click #save': 'add', 
  'mousedown .button': 'show', 
  'mouseover .button': 'hide' 
} 

CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后,编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中.
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.)

在表达式中,事件名称可以是任意的DOM事件(如click、mouseover、keypress等),元素可以是jQuery支持的任意选择器(如标签选择器、id选择器、class选择器等)。
视图会自动将表达式中的事件绑定到选择器元素,当元素的事件被触发后,视图会自动调用表达式中绑定的方法。

1.js验证 获取CKEditor 编辑器的值其实很容易,其值就是CKEDITOR.instances.mckeditor.getData(),实例代码如下:

2.6 轻量级模板解析 模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法?因为该方法能帮助我们更好地分离视图结构和逻辑,且Underscore是Backbone必须依赖的库。
模板解析方法能允许我们在HTML结构中混合嵌入JS代码,就像在JSP页面中嵌入Java代码一样:

<script language="javascript" type="text/javascript">   

  function checkForm() 
       { 
         var f=document.form1; 
         var topicHeading=f.tbTopicHeading.value; 
         topicHeading = topicHeading.replace(/^s /g,""); 
         topicHeading = topicHeading.replace(/s $/g,""); 
                 if (topicHeading =="") 
                  { 
                    alert("请输入发表话题的标题."); 
                    f.tbTopicHeading.focus(); 
                    return false; 
                  } 
                  if(topicHeading.length>50); 
                  { 
                   alert("话题的主题长度必须在50字符以内."); 
                   f.tbTopicHeading.focus(); 
                   return false; 
                  } 
         var topicContent=CKEDITOR.instances.mckeditor.getData(); 

         topicContent = topicContent.replace(/^s /g,""); 
         topicContent = topicContent.replace(/s $/g,""); 
                 if (topicContent =="") 
                  { 
                    alert("请填写话题内容."); 
                    f.mckeditor.focus(); 
                    return false; 
                  }  

                  if(topicContent.length>4000) 
                  { 
                   alert("话题内容的长度必须在4000字符以内."); 
                   f.mckeditor.focus(); 
                   return false; 
                  }       

       }  
       </script> 

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:CKEditor无法验证的解决方案,js框架入门学习指引

关键词: m.lom599.com