KindEditor 3.5.1添加内容分页

下载KindEditor 3.5.1 官方地址：

https://www.360docs.net/doc/384055497.html,/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，找到

https://www.360docs.net/doc/384055497.html,ng = {

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)来完成。'

};

这部分为鼠标停放在按钮上显示的文字，现在我们要给按钮加文字，有的人可能会说我改完第一步刷新后没看到按钮啊只有一个空格，别急慢慢来，先加上文字我是这洋写的（红色部分为添加的代码）

https://www.360docs.net/doc/384055497.html,ng = {

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, '

---

');

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, '

---

');

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这个图片里有很多默认没有用到的按钮，我只是选择了一个，大家可以自由发挥呵呵

现在大家可以去刷新下看看，按钮是不是已经出来了

效果是这样

点击一下就是这样

OK编辑器里要做的工作就是这样了。至于读取的时候要怎么做相信大家不用我交了，各种语言各种读。哈哈！

本教程由Adu原创，装载请注明出处，谢谢!