Codemirror通过HTML动态添加JS SRC
[英]Codemirror Dynamically Adding JS SRC via HTML
问题描述
Fiddle - http://liveweave.com/YXhggg 
小提琴-http: //liveweave.com/YXhggg
What I've been trying to do is simple. 我一直试图做的很简单。 I want to add the following code dynamically into Codemirror. 我想将以下代码动态添加到Codemirror中。
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>\n
It works fine if I don't add the script's HTML. 如果我不添加脚本的HTML，效果很好。 example 例
$(".jquery").click(function() {
editor.setCursor({line: 5 , ch : 0 });
editor.replaceRange("TAA DAA\n", editor.getCursor());
editor.focus();
});
But when I do this is what happens. 但是，当我这样做时，会发生什么。
Console returns with: SyntaxError: unterminated string literal defying the line error to be the following code. 控制台返回以下内容： SyntaxError: unterminated string literal行错误的SyntaxError: unterminated string literal为以下代码。
editor.replaceRange("<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>\n", editor.getCursor());
The problem continues to be with </script> within the code I'm trying to add dynamically. 问题仍然是我尝试动态添加的代码中的</script> 。
I thought maybe using the less than and greater than signs may fix the problem... 我认为也许使用小于和大于符号可以解决问题...
editor.replaceRange("<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>\n", editor.getCursor());
but didn't 但是没有
I'm confused on how to solve this problem. 我对如何解决这个问题感到困惑。
1 个解决方案
解决方案1
3 已采纳 2014-09-18 01:20:05
Fiddle - http://liveweave.com/EyC98j 小提琴-http: //liveweave.com/EyC98j
I took a look at Liveweave's source code to see how they did it. 我看了Liveweave的源代码，看看他们是如何做到的。
Liveweave looks for your <head> tag and adds your library right below it. Liveweave查找您的<head>标记，并将您的库添加到它的正下方。 If it doesn't have a head tag they alert you with a dialog suggestion. 如果没有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><head></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/><!DOCTYPE html><br/><html><br/><head><br/><title><!-- title --></title><br/> </head><br/> <body><br/> <!-- your content here --><br/> </body><br/></html>");
txt = txt+textArea;
htmlEditor.setLine(0, txt);
return false;
}
}
In my case all I needed was a forward slash right after the </ in </script> to close the code like so.. 就我而言，我只需要在</ in </script>之后的正斜杠以关闭代码即可。
editor.replaceRange("<"+"script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.min.js\">"+"</"+"script"+">\n", editor.getCursor());
If you'd like to go Liveweave's way you would add a js library like so. 如果您想采用Liveweave的方式，则可以像这样添加一个js库。
$("#jquery").click(function() {
txt="<"+"script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.min.js\">"+"</"+"script"+">";
appendJSLib(txt);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.