nicEdit编辑器使用心得
初学做网页后台,需要使用HTML编辑器或者叫富文本本机器吧.网上找来找去最后选择了nicEdit编辑器.
- 选择理由一: 文件少便于管理和修改查看,它只有一个js文件和一个gif图标文件
- 选择理由二: 界面简单不花哨,适合用于各种搭配(毕竟我是做设计,对这个有要求)
- 选择理由三: 功能简单没有那么太多多余的功能(老实说要是复杂的富文本我肯定Dreamweaver排好了复制过来那些搞那么多基本用不上)
首先就是如何使用的问题了.
[调用nicEdit编辑器]
new nicEditor(config).panelInstance("textarea标签ID或者DIV标签ID两者效果不一样的");
config是一个配置设定,是object对象.参数可以去官网查查.这里就提供两个.buttonList需要显示的按钮,设置顺序对按钮排序有影响.iconsPath是图标文件的路径!
config示例:config={uttonList: ["fontSize", "bold", "italic", "underline", "left", "center", "right", "xhtml"], iconsPath: "nicEditorIcons.gif"}
[获取nicEdit编辑器的内容]
nicEditors.findEditor("textarea标签ID").getContent();//获取的是HTML值.提这个是搜索这个编辑的时候看到有人问为什么返回的是HTML不是TEXT,我就纳闷了.要TEXT直接用textarea不就得啦嘛.
[设置nicEdit编辑器的内容]
nicEditors.findEditor("textarea标签ID").setContent("<b>引号内都是设置内容</b>")
这三个方法是我要用的.所以就介绍这三个方法,还有什么恢复textarea标签样子的那些,官网去查API吧.下载js和gif是个压缩包.里面还有示例的.可以自己参考.
下面将要提到扩展的问题,功能太简单的当然是不行的.该有的功能还得有.
var 方法名 = {
buttons: {
'按钮名,配置中的uttonList用的就是这': {
name: '鼠标移动到按钮上的提示文本',
type: '响应事件的方法名'
}
}
};
var 响应事件的方法名 = nicEditorButton.extend({
mouseClick: function() {
//逻辑内容
}
});
nicEditors.registerPlugin(nicPlugin, 方法名);//这里是注册按钮
以上需要自定义的都用中文写了.我是直接加在它的nicEdit.js文件最后的.上面的还只是第一步,因为我是写在了它原本的js文件里面.也就是说是追加功能,是常备的.不是临时加的.所以和官网的教程不一样.官网的还需要配置图标文件,我这里将做的是直接修改.
第二步来了.把它的nicEditorIcons.gif文件改掉,当然这里我有点恶心.换掉了它很多图标(还是那句话,我是做设计的看不惯有些东西).这里提示一下,一个图标是18x18像素的!所以我们追加了一个按钮出来就要利用ps等工具把它的gif图片右边增加18像素出来放置新的图标.GIF图片处理完成以后.回到js代码部分.搜索"iconList"这个关键字.有两个匹配.找到iconList:{xxx}的部分(不是iconList[d]);在iconList:{xxx}的部分添加你的按钮名结果应该是如下的iconList:{xxx,"按钮名":数字}注意逗号使用,你是添加的一个数字元素哦.按钮名不说了.后面的数字代表的是你的图标在nicEditorIcons.gif中第几个图标.从左往右数(这是写给那些想要从右往左数的低端份子看的),然后在iconList的上面还有2个方法.buttonList和iconsPath的设置.iconsPath是默认图标gif路径.有必要就改.到此就大功告成了.
nicEdit编辑器不完美有BUG
目前发现一个BUG当HTML页面含有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">标头的时候.nicEdit的高度是auto的.就是会随着你的编辑内容行数增加不断而不断延展高度.对textarea标签的样式控高根本不管用.通过对运行js的调试,发现原来nicEdit是隐藏了textare新建了一个div来编辑的.当然不管用了.在调试中查看了它DIV的样式,发现原来它设置的是min-height的属性.找到病因对症下药.打开nicEdit.js文件搜索"min-height"关键字.把min-height改成height就完美解决这个问题,当然如果你就要它延展的话就不改了.只是实现说明.它的延展不会让你下面的其他HTML标签跟着下移.延展的部分会在其他HTML标签后面,怀疑是漂浮设置.反正我不需要就没有研究.我要的就是固定的高度的.
还有一个BUG是在编辑器内回车的时候会出现原本的内容显示出两排出来.这个没有研究是那里的问题.因为代码内是正常的,估计只是渲染出现了问题.错误的显示了2行.一点显示HTML的按钮.就正常了.自己知道就行了.等我后面再来收拾它.
功能扩展技巧
搜索nicEdit相关资料的时候发现它的资料极少.可能是因为不流行吧.还有人在问怎么添加一个功能然后在光标后面添加特定字符串,比如已经定义好的<img>标签.
这里提示一下用document.execCommand("命令字符",参数,参数);它的先关命令和使用方法自己搜索一下.大把大把的多.这里在放出一个特殊技巧.因为document.execCommand不能为选择部分或光标位置直接添加字符串.所以我这里使用了曲线救国道路.按照目标功能为按下按钮后在光标位置添加一个字符"[@CODE]"功能为目标.开始一个示例
document.execCommand("insertImage",false,"临时字符串");
//上面是先往光标位置添加一个img标签.其src属性值为"临时字符串".其本机文本结果为xxxx<img src="临时字符串">
var _htmlcode = this.ne.selectedInstance.getContent().toString();
//使用this.ne.selectedInstance.getContent().toString()方法获取编辑器内的HTML代码
_htmlcode = _htmlcode.replace(/<img src=\"\临时字符串\">/,"[@CODE]");
对字符串经行操作用"[@CODE]"替换掉生成的临时标签.达到添加指定字符的功能.由于这里要使用查询替换.所以临时字符串就尽量稀奇古怪,乱七八糟,不可理喻吧.目的就是尽量让它是整个字符中的唯一.从而达到不错替换的目的.
然后需要像代码按钮一样打开新的窗口那种,直接用相对应功能的响应代码来改改吧.不难!
就此全部nicEdit相关心得完毕.鉴于它的资料是在太少放出来的.最后一句.我是平面设计,代码编程是初学.固然会有一些不完美和不恰当的部分.如果你自认为自己牛逼强悍.看不起,不爽我.请别开骂丢鸡蛋喷屎,请戳爆你的双眼,打断你的双手.自己手贱要点进来,点进来发现不对还要看下去的犯贱.