将DIV动态附加到CodeMirror中(不替换初始代码)
Dynamically Append DIV into CodeMirror (Without Replacing Initial Code)
我可以像这样动态地将div嵌入到CodeMirror中。但是,我不希望我的初始代码被以下代码取代。我是否可以在不清除初始代码的情况下附加它?
示例-http://liveweave.com/nJthjR
$("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>
使用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());
}
相关文章:
- 通过查询替换/写入文件中的代码
- 此nodeValue替换代码有什么问题
- 如何避免重复以下替换代码
- 我可以替换“;获取“;方法用“;POST”;代码库中的任何位置
- JavaScript's替换与document.create()结合的函数-这个代码是做什么的
- javascript:搜索并用不同的颜色代码替换十六进制颜色代码
- 替换文本中的随机youtube链接以使用javascript嵌入代码
- 如何将变量表达式转换为可执行代码(而不是替换值)
- 用Perl替换HTML文件的JavaScript代码
- 在代码块中查找并替换为jQuery
- 每次单击时打开新窗口的 JavaScript 代码正在替换旧窗口并创建新的空白窗口
- 在 JS 中替换 html 中的代码字符串
- JavaScript 替换源标记中的代码
- 调整图像大小以使其完美地适合幻灯片,问题仍然是用 for 循环将 CSS 代码替换为我的图像
- 如何使替换代码工作
- 在两个JavaScript注释之间替换代码
- 如何使此字符串替换代码与`<br/>`标签
- 替换代码中除公式值以外的整数
- Javascript替换代码
- 如何在窗口中使用发送邮件信息.位置替换代码