2013-07-24 65 views
17

Próbuję pracować z prostym edytorem WYSIWYG. JSLint twierdzi, że ma "złe ucieczkę z EOL". Ponieważ jestem nowy w javascript, ciężko jest mi zrozumieć, co to oznacza, ponieważ pracuję z kodem znalezionym w Internecie. Czy ktoś może mi powiedzieć, proszę, co powinienem robić, zamiast zakończyć linię za pomocą ukośnika?Złe wydostanie się z EOL

Oto kod w pytaniu: http://jsfiddle.net/spadez/KSA5e/9/

/* 
* WYSIWYG EDITOR BASED ON JQUERY RTE 
*/ 

// define the rte light plugin 
(function ($) { 

    if (typeof $.fn.rte === "undefined") { 

     var defaults = { 
      content_css_url: "rte.css", 
      dot_net_button_class: null, 
      max_height: 350 
     }; 

     $.fn.rte = function (options) { 

      $.fn.rte.html = function (iframe) { 
       return iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML; 
      }; 

      // build main options before element iteration 
      var opts = $.extend(defaults, options); 

      // iterate and construct the RTEs 
      return this.each(function() { 
       var textarea = $(this); 
       var iframe; 
       var element_id = textarea.attr("id"); 

       // enable design mode 
       function enableDesignMode() { 

        var content = textarea.val(); 

        // Mozilla needs this to display caret 
        if ($.trim(content) === '') { 
         content = '<br />'; 
        } 

        // already created? show/hide 
        if (iframe) { 
         console.log("already created"); 
         textarea.hide(); 
         $(iframe).contents().find("body").html(content); 
         $(iframe).show(); 
         $("#toolbar-" + element_id).remove(); 
         textarea.before(toolbar()); 
         return true; 
        } 

        // for compatibility reasons, need to be created this way 
        iframe = document.createElement("iframe"); 
        iframe.frameBorder = 0; 
        iframe.frameMargin = 0; 
        iframe.framePadding = 0; 
        iframe.height = 200; 
        if (textarea.attr('class')) iframe.className = textarea.attr('class'); 
        if (textarea.attr('id')) iframe.id = element_id; 
        if (textarea.attr('name')) iframe.title = textarea.attr('name'); 

        textarea.after(iframe); 

        var css = ""; 
        if (opts.content_css_url) { 
         css = "<link type='text/css' rel='stylesheet' href='" + opts.content_css_url + "' />"; 
        } 

        var doc = "<html><head>" + css + "</head><body class='frameBody'>" + content + "</body></html>"; 
        tryEnableDesignMode(doc, function() { 
         $("#toolbar-" + element_id).remove(); 
         textarea.before(toolbar()); 
         // hide textarea 
         textarea.hide(); 

        }); 

       } 

       function tryEnableDesignMode(doc, callback) { 
        if (!iframe) { 
         return false; 
        } 

        try { 
         iframe.contentWindow.document.open(); 
         iframe.contentWindow.document.write(doc); 
         iframe.contentWindow.document.close(); 
        } catch (error) { 
         console.log(error); 
        } 
        if (document.contentEditable) { 
         iframe.contentWindow.document.designMode = "On"; 
         callback(); 
         return true; 
        } else if (document.designMode !== null) { 
         try { 
          iframe.contentWindow.document.designMode = "on"; 
          callback(); 
          return true; 
         } catch (error) { 
          console.log(error); 
         } 
        } 
        setTimeout(function() { 
         tryEnableDesignMode(doc, callback); 
        }, 500); 
        return false; 
       } 

       function disableDesignMode(submit) { 
        var content = $(iframe).contents().find("body").html(); 

        if ($(iframe).is(":visible")) { 
         textarea.val(content); 
        } 

        if (submit !== true) { 
         textarea.show(); 
         $(iframe).hide(); 
        } 
       } 

       // create toolbar and bind events to it's elements 
       function toolbar() { 
        var tb = $("<div class='rte-toolbar' id='toolbar-" + element_id + "'><div>\ 
       <p>\ 
        <a href='#' class='bold'>Bold</a>\ 
        <a href='#' class='italic'>Italic</a>\ 
        <a href='#' class='unorderedlist'>List</a>\ 
       </p></div></div>"); 

        $('.bold', tb).click(function() { 
         formatText('bold'); 
         return false; 
        }); 
        $('.italic', tb).click(function() { 
         formatText('italic'); 
         return false; 
        }); 
        $('.unorderedlist', tb).click(function() { 
         formatText('insertunorderedlist'); 
         return false; 
        }); 

        // .NET compatability 
        if (opts.dot_net_button_class) { 
         var dot_net_button = $(iframe).parents('form').find(opts.dot_net_button_class); 
         dot_net_button.click(function() { 
          disableDesignMode(true); 
         }); 
         // Regular forms 
        } else { 
         $(iframe).parents('form').submit(function() { 
          disableDesignMode(true); 
         }); 
        } 

        var iframeDoc = $(iframe.contentWindow.document); 

        var select = $('select', tb)[0]; 
        iframeDoc.mouseup(function() { 
         setSelectedType(getSelectionElement(), select); 
         return true; 
        }); 

        iframeDoc.keyup(function() { 
         setSelectedType(getSelectionElement(), select); 
         var body = $('body', iframeDoc); 
         if (body.scrollTop() > 0) { 
          var iframe_height = parseInt(iframe.style['height']); 
          if (isNaN(iframe_height)) iframe_height = 0; 
          var h = Math.min(opts.max_height, iframe_height + body.scrollTop()) + 'px'; 
          iframe.style['height'] = h; 
         } 
         return true; 
        }); 
        return tb; 
       } 

       function formatText(command, option) { 
        iframe.contentWindow.focus(); 
        try { 
         iframe.contentWindow.document.execCommand(command, false, option); 
        } catch (e) { 
         //console.log(e) 
        } 
        iframe.contentWindow.focus(); 
       } 

       function setSelectedType(node, select) { 
        while (node.parentNode) { 
         var nName = node.nodeName.toLowerCase(); 
         for (var i = 0; i < select.options.length; i++) { 
          if (nName == select.options[i].value) { 
           select.selectedIndex = i; 
           return true; 
          } 
         } 
         node = node.parentNode; 
        } 
        select.selectedIndex = 0; 
        return true; 
       } 

       function getSelectionElement() { 
        if (iframe.contentWindow.document.selection) { 
         // IE selections 
         selection = iframe.contentWindow.document.selection; 
         range = selection.createRange(); 
         try { 
          node = range.parentElement(); 
         } catch (e) { 
          return false; 
         } 
        } else { 
         // Mozilla selections 
         try { 
          selection = iframe.contentWindow.getSelection(); 
          range = selection.getRangeAt(0); 
         } catch (e) { 
          return false; 
         } 
         node = range.commonAncestorContainer; 
        } 
        return node; 
       } 

       // enable design mode now 
       enableDesignMode(); 

      }); //return this.each 

     }; // rte 

    } // if 

    $(".rte-zone").rte({}); 

})(jQuery); 

EDIT: Dla znaków bonusowych są też dwa inne błędy, które nie były w stanie squish -

  • Brakujący parametr radix
  • Wysokość jest lepiej zapisana w notacji kropkowej
+1

JSLint wymusza zbyt wiele rzeczy, które nie wykorzystują ... może powinieneś spróbować [ JSHint] (http://jshint.org) – gustavohenke

Odpowiedz

23

JS nie obsługują end-of-line uciekającego z \ aż ES5 - można korzystać z wielu ciągów z + operatora zamiast, tj

"string 1" + 
"string 2" + 
"string 3" 

Re: inne pytania:

  1. Użyj parseInt(n, 10) zmusić podstawę (vel radix) 10, czyli po przecinku

  2. Zastosowanie iframe.style.height zamiast iframe.style['height']

+1

* "JS nie obsługuje (oficjalnie) przechodzenia z końca linii z' '\' '*": Działa to: http: //www.ecma-international. org/ecma-262/5.1/# sec-7.8.4, to produkcja * LineContinuation *. To po prostu okropne;) –

+0

@FelixKling to nowa rzecz? ISTR, którego nie było w poprzednich wersjach. – Alnitak

+0

Szczerze mówiąc, nie wiem. –

2

Masz dwie opcje:

1) aktywują multistr: true jak sugeruje @csharpfolk. (Możesz to zrobić na poziomie pliku, dodając /*jshint multistr: true */ lub dodać go do pliku konfiguracyjnego linera (.jshintrc, itd.)).

2) Wymień multistring jak sugeruje @Altinak lub używać tablicy i dołącz:

["string 1", "string 2", "string 3", ].join('')