В своем недавнем посте легкий визуальный (WYSIWYG) редактор на jQuery я упомянул, что существует возможность расширения редактора путем написания плагинов к нему.
Внедрив редактор в свой проект, я понял чего ему не хватает – конечно же кнопочки “очистить мусор из ворда”!!! Ведь скопированный из Microsoft Office документ при вставке его в качестве html страницы содержит в себе огромное количество лишних тегов, которые ни коим образом не улучшают оформление страницы, а лишь напротив портят его. Да и весят они зачастую намного больше, чем непосредственно содержимое страницы. Поэтому с ними необходимо боротья.
Борьбу мы будем осуществлять с помощью такой функции (ее необходимо поместить в классе Redactor где-то наряду с другими функциями (так я поместил его перед функцией init):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
cleanWordHtml: function(str)
{
str = str.replace(/\s*<\/o:p>/g, "") ;
str = str.replace(/.*?<\/o:p>/g, " ") ;
str = str.replace( /\s*mso-[^:]+:[^;"]+;?/gi, "" ) ;
str = str.replace( /\s*MARGIN: 0cm 0cm 0pt\s*;/gi, "" ) ;
str = str.replace( /\s*MARGIN: 0cm 0cm 0pt\s*"/gi, "\"" ) ;
str = str.replace( /\s*TEXT-INDENT: 0cm\s*;/gi, "" ) ;
str = str.replace( /\s*TEXT-INDENT: 0cm\s*"/gi, "\"" ) ;
str = str.replace( /\s*TEXT-ALIGN: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*PAGE-BREAK-BEFORE: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*FONT-VARIANT: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*tab-stops:[^;"]*;?/gi, "" ) ;
str = str.replace( /\s*tab-stops:[^"]*/gi, "" ) ;
str = str.replace( /\s*face="[^"]*"/gi, "" ) ;
str = str.replace( /\s*face=[^ >]*/gi, "" ) ;
str = str.replace( /\s*FONT-FAMILY:[^;"]*;?/gi, "" ) ;
str = str.replace(/<(\w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3");
str = str.replace( /<(\w[^>]*) style="([^\"]*)"([^>]*)/gi, "<$1$3" ) ;
str = str.replace( /\s*style="\s*"/gi, '' ) ;
str = str.replace( /]*>\s* \s*<\/SPAN>/gi, ' ' ) ;
str = str.replace( /]*><\/SPAN>/gi, '' ) ;
str = str.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ;
str = str.replace( /(.*?)<\/SPAN>/gi, '$1' ) ;
str = str.replace( /(.*?)<\/FONT>/gi, '$1' ) ;
str = str.replace(/<\\?\?xml[^>]*>/gi, "") ;
str = str.replace(/<\/?\w+:[^>]*>/gi, "") ;
str = str.replace( /\s*<\/H\d>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /]*)>/gi, '' ) ;
str = str.replace( /<\/H\d>/gi, '' ) ;
str = str.replace( /<(U|I|STRIKE)> <\/\1>/g, ' ' ) ;
str = str.replace( /<(B|b)> <\/\b|B>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
var re = new RegExp("(]*>.*?)(<\/P>)","gi") ;
str = str.replace( re, "" ) ;
var re2 = new RegExp("(]*>.*?)(<\/FONT>|<\/font>)","gi") ;
str = str.replace( re2, "") ;
str = str.replace( /size|SIZE = ([\d]{1})/g, '' ) ;
return str ;
}, |
Далее необходимо добавить кнопочку на тулбар:
|
1 |
clean: {name: 'clean', title: 'Очистить мусор Word', func: 'cleanWord'} |
И прописать ей обработчик клика, например такой:
|
1 2 3 4 5 6 |
cleanWord: function()
{
var html = this.getHtml();
html = this.cleanWordHtml(html);
this.setHtml(html);
}, |
Ну вот собственно и все, новая функция редактора готова, осталось лишь прописать кнопочку в CSS и залить соответствующую картинку:
|
1 |
.redactor_ico_clean { background: url(../btn/clean.png); } |
