Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bad escaping of EOL

I am trying to work with a simple WYSIWYG editor. JSLint is saying it has "Bad escaping of EOL". Since I am new to javascript I am having a hard time figuring out what it means, since I am working with code found online. Can anyone tell me please what I should be doing instead of ending the line with a slash?

Here is the code in question: 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: For bonus marks there are also two other errors which I haven't been able to squish -

  • Missing radix parameter
  • Height is better written in dot notation
like image 201
J.Zil Avatar asked Jul 24 '13 11:07

J.Zil


2 Answers

JS didn't support end-of-line escaping with \ until ES5 - you can use multiple strings with a + operator instead, i.e.

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

Re: your other questions:

  1. Use parseInt(n, 10) to force base (aka radix) 10, i.e. decimal

  2. Use iframe.style.height instead of iframe.style['height']

like image 116
Alnitak Avatar answered Oct 23 '22 09:10

Alnitak


You have two options:

1) activate multistr: true as suggested by @csharpfolk. (You can do it at file level by adding /*jshint multistr: true */ or add it in your linter config file (.jshintrc, .eslintrc, etc.)).

2) Replace your multistring as suggested by @Altinak or use an array and join:

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

like image 2
Tiagojdferreira Avatar answered Oct 23 '22 09:10

Tiagojdferreira