KindEditor 3.5.1添加文章分页教程-it论坛-计算机论坛

安哥网络

KindEditor 3.5.1添加文章分页教程-it论坛-计算机论坛
下载KindEditor 3.5.1 官方地址：http://kindeditor.googlecode.com/files/kindeditor-3.5.1-zh_CN.zip
解压后打开目录下kindeditor.js文件
1，找到
items : [
   'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
   'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
   'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
   'superscript', '|', 'selectall', '-',
   'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
   'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
   'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'
],
这个Array为编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。你可以把添加分页按钮放在任何一个地方我是这样放的（红色部分为添加的代码）
items : [
   'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
   'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
   'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
   'superscript', '|', 'selectall', '-',
   'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
   'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
   'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|','page', '|', 'about'
],
2，找到
KE.lang = {
source : 'HTML代码',
undo : '后退(Ctrl+Z)',
redo : '前进(Ctrl+Y)',
cut : '剪切(Ctrl+X)',
copy : '复制(Ctrl+C)',
paste : '粘贴(Ctrl+V)',
plainpaste : '粘贴为无格式文本',
wordpaste : '从Word粘贴',
selectall : '全选',
justifyleft : '左对齐',
justifycenter : '居中',
justifyright : '右对齐',
justifyfull : '两端对齐',
insertorderedlist : '编号',
insertunorderedlist : '项目符号',
indent : '增加缩进',
outdent : '减少缩进',
subscript : '下标',
superscript : '上标',
title : '标题',
fontname : '字体',
fontsize : '文字大小',
textcolor : '文字颜色',
bgcolor : '文字背景',
bold : '粗体(Ctrl+B)',
italic : '斜体(Ctrl+I)',
underline : '下划线(Ctrl+U)',
strikethrough : '删除线',
removeformat : '删除格式',
image : '图片',
flash : '插入Flash',
media : '插入多媒体',
table : '插入表格',
hr : '插入横线',
emoticons : '插入表情',
link : '超级链接',
unlink : '取消超级链接',
fullscreen : '全屏显示',
about : '关于',
print : '打印',
fileManager : '浏览服务器',
advtable : '表格',
yes : '确定',
no : '取消',
close : '关闭',
editImage : '图片属性',
deleteImage : '删除图片',
editLink : '超级链接属性',
deleteLink : '取消超级链接',
tableprop : '表格属性',
tableinsert : '插入表格',
tabledelete : '删除表格',
tablecolinsertleft : '左侧插入列',
tablecolinsertright : '右侧插入列',
tablerowinsertabove : '上方插入行',
tablerowinsertbelow : '下方插入行',
tablecoldelete : '删除列',
tablerowdelete : '删除行',
noColor : '无颜色',
invalidImg : "请输入有效的URL地址。/n只允许jpg,gif,bmp,png格式。",
invalidMedia : "请输入有效的URL地址。/n只允许swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",
invalidWidth : "宽度必须为数字。",
invalidHeight : "高度必须为数字。",
invalidBorder : "边框必须为数字。",
invalidUrl : "请输入有效的URL地址。",
invalidRows : '行数为必选项，只允许输入大于0的数字。',
invalidCols : '列数为必选项，只允许输入大于0的数字。',
invalidPadding : '边距必须为数字。',
invalidSpacing : '间距必须为数字。',
invalidBorder : '边框必须为数字。',
pleaseInput : "请输入内容。",
invalidJson : '服务器发生故障。',
cutError : '您的浏览器安全设置不允许使用剪切操作，请使用快捷键(Ctrl+X)来完成。',
copyError : '您的浏览器安全设置不允许使用复制操作，请使用快捷键(Ctrl+C)来完成。',
pasteError : '您的浏览器安全设置不允许使用粘贴操作，请使用快捷键(Ctrl+V)来完成。'
};
这部分为鼠标停放在按钮上显示的文字，现在我们要给按钮加文字，有的人可能会说我改完第一步刷新后没看到按钮啊只有一个空格，别急慢慢来，先加上文字我是这洋写的（红色部分为添加的代码）
KE.lang = {
source : 'HTML代码',
undo : '后退(Ctrl+Z)',
redo : '前进(Ctrl+Y)',
cut : '剪切(Ctrl+X)',
copy : '复制(Ctrl+C)',
paste : '粘贴(Ctrl+V)',
plainpaste : '粘贴为无格式文本',
wordpaste : '从Word粘贴',
selectall : '全选',
justifyleft : '左对齐',
justifycenter : '居中',
justifyright : '右对齐',
justifyfull : '两端对齐',
insertorderedlist : '编号',
insertunorderedlist : '项目符号',
indent : '增加缩进',
outdent : '减少缩进',
subscript : '下标',
superscript : '上标',
title : '标题',
fontname : '字体',
fontsize : '文字大小',
textcolor : '文字颜色',
bgcolor : '文字背景',
bold : '粗体(Ctrl+B)',
italic : '斜体(Ctrl+I)',
underline : '下划线(Ctrl+U)',
strikethrough : '删除线',
removeformat : '删除格式',
image : '图片',
flash : '插入Flash',
media : '插入多媒体',
table : '插入表格',
hr : '插入横线',
emoticons : '插入表情',
link : '超级链接',
unlink : '取消超级链接',
fullscreen : '全屏显示',
about : '关于',
page : '插入分页',
print : '打印',
fileManager : '浏览服务器',
advtable : '表格',
yes : '确定',
no : '取消',
close : '关闭',
editImage : '图片属性',
deleteImage : '删除图片',
editLink : '超级链接属性',
deleteLink : '取消超级链接',
tableprop : '表格属性',
tableinsert : '插入表格',
tabledelete : '删除表格',
tablecolinsertleft : '左侧插入列',
tablecolinsertright : '右侧插入列',
tablerowinsertabove : '上方插入行',
tablerowinsertbelow : '下方插入行',
tablecoldelete : '删除列',
tablerowdelete : '删除行',
noColor : '无颜色',
invalidImg : "请输入有效的URL地址。/n只允许jpg,gif,bmp,png格式。",
invalidMedia : "请输入有效的URL地址。/n只允许swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",
invalidWidth : "宽度必须为数字。",
invalidHeight : "高度必须为数字。",
invalidBorder : "边框必须为数字。",
invalidUrl : "请输入有效的URL地址。",
invalidRows : '行数为必选项，只允许输入大于0的数字。',
invalidCols : '列数为必选项，只允许输入大于0的数字。',
invalidPadding : '边距必须为数字。',
invalidSpacing : '间距必须为数字。',
invalidBorder : '边框必须为数字。',
pleaseInput : "请输入内容。",
invalidJson : '服务器发生故障。',
cutError : '您的浏览器安全设置不允许使用剪切操作，请使用快捷键(Ctrl+X)来完成。',
copyError : '您的浏览器安全设置不允许使用复制操作，请使用快捷键(Ctrl+C)来完成。',
pasteError : '您的浏览器安全设置不允许使用粘贴操作，请使用快捷键(Ctrl+V)来完成。'
};
OK 我们来第三部
3，找到
KE.plugin['hr'] = {
click : function(id) {
   KE.util.selection(id);
   KE.util.insertHtml(id, '<hr />');
   KE.util.focus(id);
}
};
KE.plugin['print'] = {
click : function(id) {
   KE.util.selection(id);
   KE.g[id].iframeWin.print();
}
};
这部分为在编辑区插入代码的执行代码 我们只需要在下面添加代码，修改后为（红色部分为添加的代码）
KE.plugin['hr'] = {
click : function(id) {
   KE.util.selection(id);
   KE.util.insertHtml(id, '<hr />');
   KE.util.focus(id);
}
};
KE.plugin['page'] = {
click : function(id) {
   KE.util.selection(id);
   KE.util.insertHtml(id, '[PageNext]');
   KE.util.focus(id);
}
};
KE.plugin['print'] = {
click : function(id) {
   KE.util.selection(id);
   KE.g[id].iframeWin.print();
}
};
至此kindeditor.js文件修改完毕，下面我们来让按钮出现。。。
打开目录下skins文件夹下面的default.css样式表文件
找到
.ke-icon-about {
background-position: 0px -672px;
width: 16px;
height: 16px;
}
.ke-icon-plainpaste {
background-position: 0px -704px;
width: 16px;
height: 16px;
}
这部分规定了编辑器上按钮的显示图片我们只需要做如下修改（红色部分为添加的代码）
.ke-icon-about {
background-position: 0px -672px;
width: 16px;
height: 16px;
}
.ke-icon-page {
background-position: 0px -896px;
width: 16px;
height: 16px;
}
.ke-icon-plainpaste {
background-position: 0px -704px;
width: 16px;
height: 16px;
}
这个CSS规则只是调用了一张背景图片然后让它做偏移，图片的位置在skins/default/下，文件名为default.gif这个图片里有很多默认没有用到的按钮，我只是选择了一个，大家可以自由发挥呵呵
现在大家可以去刷新下看看，按钮是不是已经出来了
效果是这样
本文摘自：http://blog.csdn.net/faleshi/article/details/6163072


接下来的处理可以参考以下文章：
http://it.agoit.com/thread-419886-1-1.html
http://it.agoit.com/thread-419887-1-1.html