这篇文章将为大家详细讲解有关CKEditor扩展插件：自动排版功能autoformat插件怎么实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验，为客户提供超值的营销型网站建设服务，我们始终认为：好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了网站设计制作、做网站服务，以良好的商业信誉，完善的服务及深厚的技术力量处于同行领先地位。
1.注册插件
首先找到根目录下的ckeditor/config.js文件，打开文件如下：
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};我们需要将我们的插件注册进CKEDITOR中。
在方法内部加入如下代码：
config.extraPlugins = "autoformart";
如果值中有其他字符,则用","逗号分隔,增加.
2.创建Plugin.js文件
在Plugins文件下新建一个与插件名相同的文件夹：aotuformart 的文件夹，意为自动排版。
再在文件夹内创建一个plugin.js文件，因为在注册插件后，首先加载和执行的就是plugin.js这个文件。
首先我们构建一个自执行函数，在自执行函数中添加一个插件：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
//初始化操作
}
});
})();添加一个命令和按钮在初始化函数中，如下：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
editor.addCommand( 'autoformat', new CKEDITOR.autoformatCommand());
editor.ui.addButton('Autoformat',{label:'自动排版',command:'autoformat',icon:CKEDITOR.getUrl( this.path + 'images/autoformat.png' )});
}
});
})();addCommand方法有两个参数：插件命令名称，第二个是命令执行的方法。
addButton方法的第一个参数是：插件的按钮名称
label：鼠标悬浮时插件提示
command：执行插件命令的名称
icon：插件图标
所有代码(上边的两块代码为演示注册插件)
//一键排版
(function () {
CKEDITOR.plugins.add('autoformat', {
requires: ['styles', 'button'],
init: function (a) {
a.addCommand('autoformat', CKEDITOR.plugins.autoformat.commands.autoformat);
a.ui.addButton('autoformat', {
label: "一键排版",
command: 'autoformat',
icon: this.path + "images/autoformat.png"
});
}
});
CKEDITOR.plugins.autoformat = {
commands: {
autoformat: {
exec: function (editor) {
formatText(editor);
}
}
}
};
//格式化
function formatText(editor) {
var myeditor = editor;
if (myeditor.mode == "wysiwyg") {
var tempimg = new Array();
var temptable = new Array();
var tempobject = new Array();
var isPart = false; //暂时无法实现局部格式化
if (!isPart) {
var tmpDiv = document.createElement("DIV");
var editorhtml = myeditor.getData();
editorhtml = editorhtml.replace(/\s* <\/span>\s*<\/div>/gi, '[ page]
'); //将div span标签替换为p 标签
tmpDiv.innerHTML = editorhtml.replace(/ /gi, '').replace(/ 0) {
tmpDiv.innerHTML = tmpDiv.innerHTML.replace(/<\/p>/gi, '\[ page\]<\/p>/gi, '
'); //p标签替换回原来的div和span标签。
if (temptable != null && temptable.length > 0) {
for (var j = 0; j < temptable.length; j++) {
var tablehtml = temptable[j];
html = html.replace("#FormatTableID_" + j + "#", tablehtml);
}
}
if (tempobject != null && tempobject.length > 0) {
for (var j = 0; j < tempobject.length; j++) {
var objecthtml = "" + tempobject[j] + "";
html = html.replace("#FormatObjectID_" + j + "#", objecthtml);
}
}
if (tempimg != null && tempimg.length > 0) {
for (var j = 0; j < tempimg.length; j++) {
var imgheight = "";
var imgwidth = "";
if (tempimg[j].height != 0)
imgheight = " height=\"" + tempimg[j].height + "\"";
if (tempimg[j].width != 0)
imgwidth = " width=\"" + tempimg[j].width + "\"";
var imgalign = "";
if (tempimg[j].align != "")
imgalign = " align=\"" + tempimg[j].align + "\"";
var imghtml = "";
html = html.replace("#FormatImgID_" + j + "#", imghtml);
}
}
for (var i = 0; i < strongcount; i++) {
html = html.replace("#FormatStrongID_" + i + "#", "" + strongarray[i] + "
");
}
while (html.indexOf("") != -1) html = html.replace("", "");
while (html.indexOf('') != -1) html = html.replace('', '');
editor.setData(html);
} else {
}
} else {
alert('必须在设计模式下操作！');
}
}
function processFormatText(textContext) {
var text = dbc2Sbc(textContext);
var prefix = "";
var tmps = text.split("\n");
var html = "";
for (var i = 0; i < tmps.length; i++) {
var tmp = tmps[i].trim();
if (tmp.length > 0) {
var reg = /#Format[A-Za-z]+_\d+#/gi;
var f = reg.exec(tmp);
if (f != null) {
tmp = tmp.replace(/#Format[A-Za-z]+_\d+#/gi, '');
html += f;
if (tmp != "")
html += "" + tmp + "
\n";
} else {
html += "" + tmp + "
\n";
}
}
}
return html;
}
function dbc2Sbc(str) {
var result = '';
for (var i = 0; i < str.length; i++) {
var code = str.charCodeAt(i);
// “65281”是“！”，“65373”是“｝”，“65292”是“，”。不转换"，"
if (code >= 65281 && code < 65373 && code != 65292 && code != 65306) {
// “65248”是转换码距
result += String.fromCharCode(str.charCodeAt(i) - 65248);
} else {
result += str.charAt(i);
}
}
return result;
}
String.prototype.trim = function () {
return this.replace(/(^[\s ]*)|([\s ]*$)/g, "");
};
String.prototype.leftTrim = function () {
return this.replace(/(^\s*)/g, "");
};
String.prototype.rightTrim = function () {
return this.replace(/(\s*$)/g, "");
};
})(); 3、配置到菜单中
例basic模式：
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize']
改为
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize','autoformat']
4、图标
当前占位已经实现，但由于没有图标，显示上会有问题，此时自己找或制作一个图标，放到autoformat/images/下命名为autoformat.png
借用某编辑器的：
如未生效，记得清除cookie或更换浏览器查看显示效果。
5、效果对比
关于“CKEditor扩展插件：自动排版功能autoformat插件怎么实现”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
