將DIV動態添加到CodeMirror中（無需替換初始代碼）

我可以像這樣動態地將DIV嵌入到CodeMirror中。不過，我不希望我的初始代碼替換爲以下內容。無論如何，我可以附加這個沒有它清除我的初始代碼？將DIV動態添加到CodeMirror中（無需替換初始代碼）

$("a#div").click(function() { 
    editor.setValue('<div class="gendiv">gendiv</div>'); 
});

的JavaScript

var delay; 

// Initialize CodeMirror editor 
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { 
    mode: 'text/html', 
    tabMode: 'indent', 
    lineNumbers: true, 
    lineWrapping: true, 
    autoCloseTags: true 
}); 

// Live preview 
editor.on("change", function() { 
    clearTimeout(delay); 
    delay = setTimeout(updatePreview, 300); 
}); 

function updatePreview() { 
    var previewFrame = document.getElementById('preview'); 
    var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; 
    preview.open(); 
    preview.write(editor.getValue()); 
    preview.close(); 
} 
setTimeout(updatePreview, 300);

全碼

<!Doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CodeMirror: HTML5 preview</title> 
<script src=http://codemirror.net/lib/codemirror.js></script> 
<script src=http://codemirror.net/mode/xml/xml.js></script> 
<script src=http://codemirror.net/mode/javascript/javascript.js></script> 
<script src=http://codemirror.net/mode/css/css.js></script> 
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script> 
<link rel=stylesheet href=http://codemirror.net/lib/codemirror.css> 
<link rel=stylesheet href=http://codemirror.net/doc/docs.css> 
<style type=text/css> 
.CodeMirror { 
    float: left; 
    width: 50%; 
    border: 1px solid black;} 

iframe { 
    width: 49%; 
    float: left; 
    height: 300px; 
    border: 1px solid black; 
    border-left: 0px;} 
</style> 
</head> 
<body> 
<h1>CodeMirror: HTML5 preview</h1> 
<textarea id=code name=code><!doctype html> 
<html> 
    <head> 
    <meta charset=utf-8> 
    <title>HTML5 canvas demo</title> 
    <style>p {font-family: monospace;}</style> 
    </head> 
    <body> 
    <p>Canvas pane goes here:</p> 
    <canvas id=pane width=300 height=200></canvas> 
    <script> 
     var canvas = document.getElementById('pane'); 
     var context = canvas.getContext('2d'); 

     context.fillStyle = 'rgb(250,0,0)'; 
     context.fillRect(10, 10, 55, 50); 

     context.fillStyle = 'rgba(0, 0, 250, 0.5)'; 
     context.fillRect(30, 30, 55, 50); 
    </script> 
    </body> 
</html></textarea> 
    <iframe id=preview></iframe> 
    <a href="#my-header" onclick='DivGen()'>Generate DIV</a> 

<script> 
var delay; 

// Initialize CodeMirror editor 
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { 
    mode: 'text/html', 
    tabMode: 'indent', 
    lineNumbers: true, 
    lineWrapping: true, 
    autoCloseTags: true 
}); 

// Live preview 
editor.on("change", function() { 
    clearTimeout(delay); 
    delay = setTimeout(updatePreview, 300); 
}); 

function updatePreview() { 
    var previewFrame = document.getElementById('preview'); 
    var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; 
    preview.open(); 
    preview.write(editor.getValue()); 
    preview.close(); 
} 
setTimeout(updatePreview, 300); 

function destroyClickedElement(event) { 
    document.body.removeChild(event.target);} 

function DivGen() { 
    editor.setValue('<div class="gendiv">gendiv</div>');} 
</script> 
</body> 
</html>

來源

2013-08-04 Michael Schwartz

使用replaceRange()：

function DivGen() { 
    editor.replaceRange(
     '<div class="gendiv">gendiv</div>\n', {line: 9,ch: 0}, {line: 9,ch: 0}); 
}

您也可以根據上光標的位置：

function DivGen() { 
    editor.replaceRange(
     '<div class="gendiv">gendiv</div>\n', editor.getCursor()); 
}

來源

2013-08-04 23:43:19 aljordan82

無論如何做它基於文本光標位置，而不是有沒有具體的路線？ –

是的，我更新了代碼。 – aljordan82

將DIV動態添加到CodeMirror中（無需替換初始代碼）

回答

相關問題