ckeditor一鍵排版功能實(shí)現(xiàn)方法分析
本文實(shí)例講述了ckeditor一鍵排版功能實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
參考:
http://www.dbjr.com.cn/article/179679.htm
<script src="https://cdn.jsdelivr.net/npm/ckeditor-full@4.7.3/ckeditor.js"></script> CKEDITOR.plugins.addExternal('autoformat', '/static/ckeditor/myplugins/autoformat/', 'plugin.js'); var editor = CKEDITOR.replace(this.$el, { customConfig: '/static/ckeditor/config.js', extraPlugins: 'autoformat' });
config.js
CKEDITOR.editorConfig = function(config) { config.extraPlugins = "autoformart"; };
plugin.js
(function() { CKEDITOR.plugins.add("autoformat", { 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; //暫時(shí)無法實(shí)現(xiàn)局部格式化 if (!isPart) { var tmpDiv = document.createElement("DIV"); var editorhtml = myeditor.getData(); editorhtml = editorhtml.replace( /<div style="page-break-after: always;?">\s*<span style="display: none;?"> <\/span>\s*<\/div>/gi, "<p>[ page]</p>" ); //將div span標(biāo)簽替換為p 標(biāo)簽 tmpDiv.innerHTML = editorhtml .replace(/ /gi, "") .replace(/<div/gi, "<p") .replace(/<\/div/gi, "</p"); //移除空格標(biāo)簽,div替換為p標(biāo)簽。 if ( window.navigator.userAgent.toLowerCase().indexOf("msie") > 0 ) { tmpDiv.innerHTML = tmpDiv.innerHTML.replace( /<\/p>/gi, "<br /></p>" ); //每個(gè)段落相隔一行 } var tables = tmpDiv.getElementsByTagName("TABLE"); if (tables != null && tables.length > 0) { for (var j = 0; j < tables.length; j++) { temptable[temptable.length] = tables[j].outerHTML; } var formattableCount = 0; for (var j = 0; j < tables.length; ) { tables[j].outerHTML = "#FormatTableID_" + formattableCount + "#"; formattableCount++; } } var objects = tmpDiv.getElementsByTagName("OBJECT"); if (objects != null && objects.length > 0) { for (var j = 0; j < objects.length; j++) { tempobject[tempobject.length] = objects[j].outerHTML; } var formatobjectCount = 0; for (var j = 0; j < objects.length; ) { objects[j].outerHTML = "#FormatObjectID_" + formatobjectCount + "#"; formatobjectCount++; } } var imgs = tmpDiv.getElementsByTagName("IMG"); if (imgs != null && imgs.length > 0) { for (var j = 0; j < imgs.length; j++) { var t = document.createElement("IMG"); t.alt = imgs[j].alt; t.src = imgs[j].src; t.width = imgs[j].width; t.height = imgs[j].height; t.align = imgs[j].align; tempimg[tempimg.length] = t; } var formatImgCount = 0; for (var j = 0; j < imgs.length; ) { imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#"; formatImgCount++; } } var strongarray = new Array(); var strongcount = 0; for ( var i = 0; i < tmpDiv.getElementsByTagName("b").length; i++ ) { strongarray[strongcount] = tmpDiv .getElementsByTagName("b") [i].innerText.trim(); tmpDiv.getElementsByTagName("b")[i].innerHTML = "#FormatStrongID_" + strongcount + "#"; strongcount++; } for ( var i = 0; i < tmpDiv.getElementsByTagName("strong").length; i++ ) { strongarray[strongcount] = tmpDiv .getElementsByTagName("strong") [i].innerText.trim(); tmpDiv.getElementsByTagName("strong")[i].innerHTML = "#FormatStrongID_" + strongcount + "#"; strongcount++; } var html = processFormatText(tmpDiv.innerText); html = html.replace( /<p>\[ page\]<\/p>/gi, '<div style="page-break-after: always;"><span style="display: none;"> </span></div>' ); //p標(biāo)簽替換回原來的div和span標(biāo)簽。 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 = '<p align="center">' + tempobject[j] + "</p>"; 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 = '<p align="center"><img src="' + tempimg[j].src + '" alt="' + tempimg[j].alt + '"' + imgwidth + " " + imgheight + ' align="' + tempimg[j].align + '" border="0"></p>'; html = html.replace("#FormatImgID_" + j + "#", imghtml); } } for (var i = 0; i < strongcount; i++) { html = html.replace( "#FormatStrongID_" + i + "#", "<p><strong>" + strongarray[i] + "</strong></p>" ); } while (html.indexOf("</p></p>") != -1) html = html.replace("</p></p>", "</p>"); while (html.indexOf('<p><p align="center">') != -1) html = html.replace( '<p><p align="center">', '<p align="center">' ); editor.setData(html); } else { } } else { alert("必須在設(shè)計(jì)模式下操作!"); } } 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 += '<p align="center">' + tmp + "</p>\n"; } else { html += "<p style='text-indent:2em;'>" + tmp + "</p>\n"; } } } return html; } function dbc2Sbc(str) { var result = ""; for (var i = 0; i < str.length; i++) { var code = str.charCodeAt(i); // “65281”是“!”,“65373”是“}”,“65292”是“,”。不轉(zhuǎn)換"," if ( code >= 65281 && code < 65373 && code != 65292 && code != 65306 ) { // “65248”是轉(zhuǎn)換碼距 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, ""); }; })();
希望本文所述對(duì)大家CKEDitor富文本編輯器開發(fā)有所幫助。
- CKEditor擴(kuò)展插件:自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法詳解
- FCKeditor 插件開發(fā) 示例(詳細(xì)版本)
- ckeditor自定義插件使用方法詳解
- CKEditor 附插入代碼的插件
- 添加FCKeditor插件需要注意的地方
- ckeditor插件開發(fā)簡單實(shí)例
- fckeditor 插件實(shí)例 制作步驟
- autogrow 讓FCKeditor高度隨內(nèi)容增加的插件
- CKEditor中加入syntaxhighlighter代碼高亮插件
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
相關(guān)文章
使用JavaScript實(shí)現(xiàn)響應(yīng)式計(jì)數(shù)器動(dòng)畫
在本文中,我們將學(xué)習(xí)如何使用?HTML?CSS?和?JavaScript創(chuàng)建響應(yīng)式計(jì)數(shù)器動(dòng)畫。?我們在很多地方都可以用,比如適用于不同類型的個(gè)人網(wǎng)站、企業(yè)網(wǎng)站等,感興趣的可以了解一下2022-08-08JS前端千萬級(jí)彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Javascript中引用類型傳遞的知識(shí)點(diǎn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Javascript中引用類型傳遞的知識(shí)點(diǎn),文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03gridview生成時(shí)如何去掉style屬性中的border-collapse
默認(rèn)gridview控件會(huì)在生成的html代碼中的style屬性中加入border-collapse:collapse,如果想把它去掉的話2014-09-09javascript實(shí)現(xiàn)rgb顏色轉(zhuǎn)換成16進(jìn)制格式
本文給大家分享的是使用javascript實(shí)現(xiàn)rgb顏色轉(zhuǎn)換成16進(jìn)制格式的方法和示例代碼,有需要的小伙伴可以參考下。2015-07-07use jscript List Installed Software
use jscript List Installed Software...2007-06-06