`
achun
  • 浏览: 313868 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

[nicEdit专题]bkLib,$BK , Function closur and __

阅读更多

bkLib :

这个是BK写的一些很实用的函数了,看看里面的函数好像只有一个不常见,

camelize 

这个是 驼峰风格 的字符串转换函数,看看他的规则很简单,就是如果如果字符串里面出现 - 号,就把 - 删除,并把紧跟后面的字母替换为大写, 驼峰风格真是个形象的比喻.
使用这个函数的原因是DOM对象中有个
currentStyle,他对于样式属性的命名规则是 驼峰风格的,比如 background-color被写成backgroundColor,就是这样。

$BK :

这个函数对象很有意思,看代码是根据ID返回一个DOM对象或者进一步DOM对象扩展为 bkElement 对象。
这种写法叫什么呢?步进?我不知道.

Function closur :

函数闭包,设计了两个函数, closur, closureListener .
关于闭包的详细资料您可以自己去查查资料,不过这里的闭包作用是绑定触发对象,
前面我们看到
nicEdit有对事件Event进行自己的封装,她的事件是可以外部触发(代码触发)的,很明显通过外部触发的事件的触发者this,并不是我们期望的对象本身,而是外部触发的对象。因此需要把我们期望的对象绑定到触发事件,闭包在这起了作用。
我们接着看源代码发现,所有的addEvend实例代码都用闭包做为参数。呵呵我们使用的时候当他透明好了。除非你自己制作扩展,那一定要明白闭包的作用了。

__ :

这个函数目前太简单了,就是返回参数自身,看看__在源代码里的使用,好像传入的参数都是字符串,做什么用呢?I18N,国际化了。作者虽然没有给出另外lang的例子,不过我们知道I18N的接口已经留下了。
现在就让我们实做一个zh-CN的翻译吧。最简单的方法是什么呢?当然是直接把翻译写入__函数内部,不过这样就不是I18N,而是zh-CN了。
我们做个小小的扩展为nicEdit增加一个nicEditorI18N的对象使用起来就像下面代码的实例

 if (nicEditorI18N==undefined) {
      nicEditorI18N={};
   }
   nicEditorI18N['zh-CN'] = {
      'Click to Bold' :'加黑',
      'Click to Italic' :'倾斜',
      'Click to Underline' :'下划线',
      'Left Align' :'左对齐',
      'Center Align' :'中间对齐',
      'Right Align' :'右对齐',
      'Insert Ordered List' :'有序列表',
      'Insert Unordered List' :'无序列表',
      'Select Font Size' :'字体大小',
      'Select Font Family' :'字体样式',
      'Select Font Format' :'字体格式',
      'Click to Subscript' :'下标',
      'Click to Superscript' :'上标',
      'Click to Strike Through' :'删除线',
      'Remove Indent' :'减少缩进量',
      'Indent Text' :'增加缩进量',
      'Horizontal Rule' :'水平线',
      'Change Text Color' :'更改文字颜色',
      'Change Background Color':'更改背景色',
      'Add Image' :'添加图片',
      'Edit HTML' :'编辑 HTML',
      'Add Link' :'添加链接',
      'Remove Link':'移除链接'
   };
 

可以把它存储为zh-CN.js,在调入nicEdit的其他js之前先调入他(也许是其他的语言),我们还需要表明所使用的语种
设定一个变量就行了。

var nicEditorLang='zh-CN';

 最后我们改写__

var __=function(s){
   if(nicEditorLang && nicEditorI18N)
      return nicEditorI18N[nicEditorLang][s] || s;
   else
      return s;
}

 

你也许会问,怎么用 zh-CN ,不用 zh_cn 呢?
你当然可以用zh_cn了,我用zh-CN的目的很简单就是因为标准的语种定义应该在html标签里写上xml:lang="zh-CN"的,如果我们写的都这么标准的话,就不用定义nicEditorLang这个变量了,直接取这个xml:lang就行了。

路有很多条,反正是扩展嘛,要自己动手的怎么做看你的选择了。

分享到:
评论

相关推荐

    nicEdit_脚本实例_

    【 nicEdit 脚本实例详解 】 nicEdit 是一个轻量级的在线HTML编辑器,主要用于网页上提供便捷的富文本编辑功能。它旨在简化网页中的文本输入体验,让用户可以像在桌面文本编辑器中一样编辑内容,而无需深入学习复杂...

    nicEdit富文本编辑器

    bkLib.onDomLoaded(function() { new nicEditor().panelInstance('myTextArea'); }); <textarea id="myTextArea"></textarea> ``` 这里,`new nicEditor().panelInstance('myTextArea')`会将ID为`myTextArea`的...

    nicEdit轻量级网页富文本编辑器

    bkLib.onDomLoaded(function() { new nicEditor().panelInstance('yourTextareaId'); }); ``` 这里的`yourTextareaId`是你希望转化为富文本编辑器的textarea元素的ID。 3. **配置选项**: 可以通过传递一个配置...

    nicedit

    "nicEdit"是一款轻量级但功能强大的在线文本编辑器,专为网页设计和内容创建者提供便捷的富文本编辑体验。它不占用大量系统资源,却能提供类似于桌面文字处理软件的功能,使得用户在网页上可以轻松进行格式化、插入...

    nicEdit中文以及官方demo(自己汉化的)

    bkLib.onDomLoaded(function() { new nicEditor().panelInstance('area1'); new nicEditor({fullPanel : true}).panelInstance('area2'); new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('...

    nicEdit源代码

    **nicEdit**是一款轻量级的网页所见即所得(WYSIWYG)编辑器,它的特点是体积小巧,仅由一个JavaScript文件和一个图像文件组成。这种简洁的设计使得nicEdit在网页集成上非常便捷,无需复杂的配置和安装过程,极大地...

    nicEdit轻量级文本编辑器

    **nicEdit轻量级文本编辑器** nicEdit是一款小巧而功能强大的在线文本编辑器,它专为网页开发者设计,主要用于在网页上提供便捷的富文本编辑功能。由于其体积小、加载速度快,使得它成为很多网站论坛、博客和其他...

    NicEdit编辑器API文档

    ### NicEdit编辑器API文档知识点概述 #### 一、关于NicEdit NicEdit是一款轻量级、跨平台的内联内容编辑器,旨在使网站内容能够轻松地在浏览器中进行即时编辑。它的小巧易用使得任何网页元素或div都可以变成可编辑...

    NicEdit基于AJAX 技术的WYSIWYG 在线编辑器

    ** NicEdit:基于AJAX技术的WYSIWYG在线编辑器 ** NicEdit是一款轻量级、高效的富文本编辑器,它利用AJAX技术实现了无刷新的“所见即所得”(WYSIWYG)编辑功能。在网页设计中,这种编辑器允许用户在浏览器上直接...

    html文本编辑器(nicEdit)

    1. **JavaScript库**:nicEdit是基于JavaScript编程语言构建的,这意味着它可以在客户端运行,无需服务器端支持。JavaScript库通常用于增强网页交互性,提供动态效果和功能。 2. **富文本编辑**:nicEdit提供了富...

    JS 插件NicEdit富文本编辑器特效源码.rar

    bkLib.onDomLoaded(function() { new nicEditor().panelInstance('yourTextareaId'); }); ``` 这段代码会在页面加载完成后,将ID为`yourTextareaId`的textarea转换为NicEdit富文本编辑器。 五、定制和扩展...

    简洁的富文本编辑器NicEdit插件

    在这个专题中,我们将深入探讨NicEdit的基本功能、优点、如何使用以及其在实际项目中的应用。 首先,让我们了解NicEdit的核心特性。NicEdit是一个Inline Content Editor,这意味着它可以直接嵌入到HTML元素中,使得...

    nicEdit 编辑器

    **nicEdit 编辑器详解** 在Web开发中,富文本编辑器是不可或缺的一部分,它为用户提供了在网页上创建和编辑复杂格式文本的能力。nicEdit是一款轻量级且易于集成的富文本编辑器,特别适合那些对资源要求严格的项目。...

    NicEdit富文本编辑器

    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); ``` 这段代码会在页面加载完成后,将所有`<textarea>`元素替换为NicEdit编辑器。 总的来说,NicEdit作为一款优秀的富文本编辑器,以其轻巧、兼容...

    NicEdit-Textarea编辑器

    NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。 NicEdit是我见过最轻量级的富文本编辑器,总共就一个JS文件和一张图片,经过我在项目里的使用情况来看,相当好用。

    简洁在线HTML编辑器(nicedit)

    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() // 将所有文本区域转换为nicEdit编辑器 }); ``` 如果你想针对特定的元素启用nicEdit,可以这样写: ```javascript var nicEditorInstance = new ...

    nicEdit HTML网页在线编辑器.rar

    nicEdit 是一款简洁的HTML网页在线编辑器,上传功能需要自己添加,nicEdit除了上传功能外,几乎包括了常用的网页文字编辑功能,包括排版、字体样式设计、表格插入、图片插入等,若对编辑器上传功能无要求的话,...

    nicEdit简单小巧编辑器

    **nicEdit:小巧而强大的网页文本编辑器** nicEdit是一款轻量级的JavaScript富文本编辑器,它以其简洁的设计和全面的功能集而受到广大Web开发者的喜爱。在网页设计和内容管理系统(CMS)中,富文本编辑器是必不可少...

    nicEdit 支持图片上传 php

    在使用 nicEdit 时,你需要在页面中引入这个文件,并调用 `bkLib.onDomLoaded(nicSetup);` 来启动编辑器。如果要启用图片上传,还需要额外的配置,例如设置图片上传的 URL 为 `upload.php`。 `demo.html` 是一个...

    前端项目-NicEdit.zip

    《NicEdit:一款轻量级的前端富文本编辑器》 在前端开发中,富文本编辑器是一个不可或缺的工具,它允许用户以类似Word的方式在网页上编辑内容。NicEdit是一款小巧而强大的富文本编辑器,它以简洁的API、易用性和...

Global site tag (gtag.js) - Google Analytics