3
Kodumu buraya kaydetmek için Github Gist kullanıyorum. Ancak editör boşsa, kaydedemez, böylece bir değere sahip olup olmadığını kontrol etmek için bir üçlü/koşullu operatör kullanıyorum; eğer bunu bir gist olarak kaydederse ve bir sonraki değere geçmezse. Boş değerleri JSON'dan geçirme?
Maalesef konsol arkaUncaught SyntaxError: Unexpected token (
ile geldi nasıl ana fikri olarak bir değere sahip düzenleyen ve atlamak için eşleşmeyenler kurtarmak gerekiyor?
Herhangi biri yardım ederse, büyük beğeni kazanır. Üçlü operatör koşullarında
$("[data-action=save]").click(function() {
data = {
"description": "sample description",
"public": true,
"files": {
(!htmlEditor.getValue()) ? "" : "index.html" : { "content": htmlEditor.getValue() },
(!cssEditor.getValue()) ? "" : "index.css" : { "content": cssEditor.getValue() },
(!jsEditor.getValue()) ? "" : "index.js" : { "content": jsEditor.getValue() },
"README.md" : { "content": "# readme sample" }
}
}
// Post on Github via JQuery Ajax
$.ajax({
url: "https://api.github.com/gists",
type: "POST",
dataType: "json",
data: JSON.stringify(data)
}).success(function(e) {
$("[data-action=saved]").text(e.html_url)
$("[data-action=saved]").attr("href", e.html_url).attr("target", "_blank")
// Let user view gist
console.log("Your weave is saved!")
}).error(function(e) {
console.warn("Error: Could not save weave!", e)
})
})
var delay
// Initialize CodeMirror editor
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
mode: "text/html",
tabMode: "indent",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), {
mode: "text/css",
tabMode: "indent",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), {
mode: "text/javascript",
tabMode: "indent",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
// Live preview
function updatePreview() {
var previewFrame = document.getElementById("preview")
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document
preview.open()
var htmlContent = "<st"+"yle>" + cssEditor.getValue() + "</st"+"yle>" + htmlEditor.getValue() + "<scr"+"ipt>" + jsEditor.getValue() + "</scr"+"ipt>"
preview.write(htmlContent)
preview.close()
}
setTimeout(updatePreview, 300)
// Call live preview when code changes
htmlEditor.on("change", function() {
clearTimeout(delay)
delay = setTimeout(updatePreview, 300)
})
cssEditor.on("change", function() {
clearTimeout(delay)
delay = setTimeout(updatePreview, 300)
})
jsEditor.on("change", function() {
clearTimeout(delay)
delay = setTimeout(updatePreview, 300)
})
// Setup Grid
$("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ theme: "metro" })
$("#splitContainer").jqxSplitter({
height: "auto",
width: "100%",
orientation: "horizontal",
showSplitBar: true,
panels: [
{
size: "50%",
collapsible: false
},
{ size: "50%" }
]
})
$("#leftSplitter").jqxSplitter({
height: "100%",
width: "100%",
orientation: "vertical",
showSplitBar: true,
panels: [
{
size: "50%",
collapsible: false
},
{ size: "50%" }
]
})
$("#rightSplitter").jqxSplitter({
height: "100%",
width: "100%",
orientation: "vertical",
showSplitBar: true,
panels: [
{ size: "50%" },
{
size: "50%",
collapsible: false
}
]
})body {
overflow: hidden;
}
header {
position: absolute;
left: 0;
right: 0;
padding: 8px 5px;
overflow: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.save {
padding: 11px;
}
#splitContainer {
position: absolute;
top: 40px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
.CodeMirror {
font-family: monospace;
font-size: 14px;
font-weight: normal;
display: block;
width: 100%;
background: transparent;
height: 100% !important;
}
.CodeMirror-gutters {
height: 100% !important;
}
.lint-error {
font-family: arial;
font-size: 70%;
background: #ffa;
color: #a00;
padding: 2px 5px 3px;
}
.lint-error-icon {
color: white;
background-color: red;
font-weight: bold;
border-radius: 50%;
padding: 0 3px;
margin-right: 7px;
}
.editor-container {
width: 100%;
height: 100%;
background: #fff;
}
.editor-container > * {
width: 100%;
height: 100%;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
resize: none;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
<header>
<a href="javascript:void(0)" data-action="save" class="save">save</a>
<a data-action="saved"></a>
</header>
<form class="fill">
<div id="splitContainer">
<div>
<div id="leftSplitter">
<div>
<textarea id="htmlEditor"><!-- sample html --></textarea>
</div>
<div>
<textarea id="cssEditor"></textarea>
</div>
</div>
</div>
<div>
<div id="rightSplitter">
<div>
<textarea id="jsEditor">// sample js</textarea>
</div>
<div>
<iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
</div>
</div>
</div>
</form>
bu durum 'geçersiz görünüyor (! HtmlEditor.getValue())? "": "index.html": {"content": htmlEditor.getValue()}, (! cssEditor.getValue())? "": "index.css": {"content": cssEditor.getValue()}, (! jsEditor.getValue())? "": "index.js": {"içerik": jsEditor.getValue()}, ' – itzmukeshy7