Question

我的客户想要一个UI，他将从MS Word复制一些文本并粘贴。在他粘贴之后，我的脚本应删除Word的所有样式和标签，但保留段落（html p标签）和粗体样式（html b标签）。

我准备了一个具有html5 contenteditable的UI，其中有许多具有不同内容类型的可编辑部分（标题，1和2列段落等）

我找到了一个运行良好的脚本，可以完全执行我想要的操作。但是，如果我想使用其他选择器（脚本使用#content选择器），则无法使用。我想使用一个类，因为可以将具有.editable_div类的许多部分添加到UI中。

也许是因为我不太擅长JS和Jquery。该脚本在下面，如何使它与页面上具有类名称的许多部分一起使用？

非常感谢...

Index.html：

<!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>

和脚本：

(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(/&nbsp;/gi, "\u00a0");
            content = content.replace(/&nbsp;/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());
})

Answer 1

我找到了。选择器不是问题。 $（'。editable_div'）。msword_html_filter（）;正常工作。

但是，如果父div是contenteditable = true，则该脚本不适用于子div。我仍然不知道为什么。谢谢大家。

将MS Word粘贴为文本，但保留一些样式的Jquery

1 个答案: