Question

我一直在努力做的事情很简单。我想将以下代码动态添加到Codemirror中。

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>\n

如果我不添加脚本的HTML，它可以正常工作。 example

$(".jquery").click(function() {
  editor.setCursor({line: 5 , ch : 0 });
  editor.replaceRange("TAA DAA\n", editor.getCursor()); 
  editor.focus();
});

但是当我这样做时会发生这种情况。

enter image description here

控制台返回：SyntaxError: unterminated string literal违反行错误为以下代码。

editor.replaceRange("<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>\n", editor.getCursor());

问题仍然存在于我尝试动态添加的代码中</script>。

我认为使用小于和大于标志可能会解决问题......

editor.replaceRange("&lt;script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt;\n", editor.getCursor());

但没有

enter image description here

我对如何解决这个问题很困惑。

Answer 1

小提琴 - http://liveweave.com/EyC98j

我看了一下Liveweave的源代码，看看他们是如何做到的。

Liveweave会查找您的<head>标记，并在其下方添加您的图书馆。如果它没有头标记，则会通过对话建议提醒您。

  // Append JS library to HTML <head>
  function appendJSLib(txt) {
  var textArea=htmlEditor.getValue();
        var searchText = textArea.search("<head>");
        if(searchText>0) {
        txt = "<head>"+"\n"+txt;
        var updatedTextArea = textArea.replace("<head>",txt);
        htmlEditor.setValue(updatedTextArea);
        }
        else {
        reset();
        alertify.alert("<span style='color: #f5f5f5; padding:4px 6px 4px 6px; border-radius:3px; background-color: #cc0000;'>WARNING!</span><br/><br/> The <strong>&lt;head&gt;</strong> tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the structure of a correct HTML code below:<br/><br/>&lt;!DOCTYPE html&gt;<br/>&lt;html&gt;<br/>&lt;head&gt;<br/>&lt;title&gt&lt;!-- title --&gt;&lt;/title&gt;<br/> &lt;/head&gt;<br/> &lt;body&gt;<br/> &lt;!-- your content here --&gt;<br/> &lt;/body&gt;<br/>&lt;/html&gt;");
        txt = txt+textArea;
        htmlEditor.setLine(0, txt);
        return false;
        }
  }

在我的情况下，我需要的只是</ </script>之后的正斜杠，以便像这样关闭代码。

editor.replaceRange("<"+"script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.min.js\">"+"</"+"script"+">\n", editor.getCursor());

如果你想以Liveweave的方式去添加一个像这样的js库。

$("#jquery").click(function() {
  txt="<"+"script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.min.js\">"+"</"+"script"+">";
  appendJSLib(txt);
});

Codemirror通过HTML动态添加JS SRC

1 个答案: