Last active
February 10, 2023 22:23
-
-
Save sbrin/6801034 to your computer and use it in GitHub Desktop.
Paste MS Word Text Jquery plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="src">Source here...</div> | |
| <div id="editor" contenteditable="true"> | |
| <p>Place MS-Word text here...</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $.fn.msword_html_filter = function(options) { | |
| var settings = $.extend( {}, options); | |
| function word_filter(editor){ | |
| var content = editor.html(); | |
| // Word comments like conditional comments etc | |
| content = content.replace(/<!--[\s\S]+?-->/gi, ''); | |
| // Remove comments, scripts (e.g., msoShowComment), XML tag, VML content, | |
| // MS Office namespaced tags, and a few other tags | |
| content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]*>/gi, ''); | |
| // Convert <s> into <strike> for line-though | |
| content = content.replace(/<(\/?)s>/gi, "<$1strike>"); | |
| // Replace nbsp entites to char since it's easier to handle | |
| //content = content.replace(/ /gi, "\u00a0"); | |
| content = content.replace(/ /gi, ' '); | |
| // Convert <span style="mso-spacerun:yes">___</span> to string of alternating | |
| // breaking/non-breaking spaces of same length | |
| content = content.replace(/<span\s+style\s*=\s*"\s*mso-spacerun\s*:\s*yes\s*;?\s*"\s*>([\s\u00a0]*)<\/span>/gi, function(str, spaces) { | |
| return (spaces.length > 0) ? spaces.replace(/./, " ").slice(Math.floor(spaces.length/2)).split("").join("\u00a0") : ''; | |
| }); | |
| editor.html(content); | |
| // Parse out list indent level for lists | |
| $('p', editor).each(function(){ | |
| var str = $(this).attr('style'); | |
| var matches = /mso-list:\w+ \w+([0-9]+)/.exec(str); | |
| if (matches) { | |
| $(this).data('_listLevel', parseInt(matches[1], 10)); | |
| } | |
| }); | |
| // Parse Lists | |
| var last_level=0; | |
| var pnt = null; | |
| $('p', editor).each(function(){ | |
| var cur_level = $(this).data('_listLevel'); | |
| if(cur_level != undefined){ | |
| var txt = $(this).text(); | |
| var list_tag = '<ul></ul>'; | |
| if (/^\s*\w+\./.test(txt)) { | |
| var matches = /([0-9])\./.exec(txt); | |
| if (matches) { | |
| var start = parseInt(matches[1], 10); | |
| list_tag = start>1 ? '<ol start="' + start + '"></ol>' : '<ol></ol>'; | |
| }else{ | |
| list_tag = '<ol></ol>'; | |
| } | |
| } | |
| if(cur_level>last_level){ | |
| if(last_level==0){ | |
| $(this).before(list_tag); | |
| pnt = $(this).prev(); | |
| }else{ | |
| pnt = $(list_tag).appendTo(pnt); | |
| } | |
| } | |
| if(cur_level<last_level){ | |
| for(var i=0; i<last_level-cur_level; i++){ | |
| pnt = pnt.parent(); | |
| } | |
| } | |
| $('span:first', this).remove(); | |
| pnt.append('<li>' + $(this).html() + '</li>') | |
| $(this).remove(); | |
| last_level = cur_level; | |
| }else{ | |
| last_level = 0; | |
| } | |
| }) | |
| $('[style]', editor).removeAttr('style'); | |
| $('[align]', editor).removeAttr('align'); | |
| $('span', editor).replaceWith(function() {return $(this).contents();}); | |
| $('span:empty', editor).remove(); | |
| $("[class^='Mso']", editor).removeAttr('class'); | |
| $('p:empty', editor).remove(); | |
| } | |
| return this.each(function() { | |
| $(this).on('keyup', function(){ | |
| $('#src').text($('#editor').html()); | |
| var content = $(this).html(); | |
| if (/class="?Mso|style="[^"]*\bmso-|style='[^'']*\bmso-|w:WordDocument/i.test( content )) { | |
| word_filter( $(this) ); | |
| } | |
| }); | |
| }); | |
| }; | |
| })( jQuery ) | |
| $(function(){ | |
| $('#editor').msword_html_filter(); | |
| $('#src').text($('#editor').html()); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #editor{ | |
| width:50%; | |
| height:400px; | |
| border:1px solid #777; | |
| } | |
| #src{ | |
| width:49%; | |
| float:right; | |
| height:400px; | |
| border:1px solid #f99; | |
| font-family: consolas, mono; | |
| } |
If I want to use this with a class selector, it is not working. I just want to use
Any idea how can I ?
Excellent work my bro!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great work ! But does it work on Edge ? I tried but it seems to fail...