Fatal编程技术网
  • javascript/
  • Javascript 将DIV动态附加到CodeMirror中（不替换初始代码）

Javascript 将DIV动态附加到CodeMirror中（不替换初始代码）

javascript

Javascript 将DIV动态附加到CodeMirror中（不替换初始代码）,javascript,append,dynamically-generated,codemirror,Javascript,Append,Dynamically Generated,Codemirror,我可以像这样在CodeMirror中动态嵌入一个DIV。但是，我不希望我的初始代码替换为以下代码。我是否可以在不清除初始代码的情况下附加这个 示例- 完整代码 <!Doctype html> <html> <head> <meta charset="utf-8"> <title>CodeMirror: HTML5 preview</title> <script src=http://codemirror.net/lib

我可以像这样在CodeMirror中动态嵌入一个DIV。但是，我不希望我的初始代码替换为以下代码。我是否可以在不清除初始代码的情况下附加这个

示例-

完整代码

<!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>


CodeMirror:HTML5预览版
.CodeMirror{
浮动：左；
宽度：50%；
边框：1px纯黑；}
iframe{
宽度：49%；
浮动：左；
高度：300px；
边框：1px纯黑；
左边框：0px；}
CodeMirror:HTML5预览版
HTML5画布演示
p{font-family:monospace；}
画布窗格位于此处：

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,0250,0.5）'；
context.fillRect（30,30,55,50）；
无功延迟；
//初始化代码镜像编辑器
var editor=CodeMirror.fromTextArea（document.getElementById（'code'）{
模式：“text/html”，
tabMode:'缩进'，
行号：对，
换行：对，
自动关闭标签：true
});
//现场预览
关于（“更改”，函数（）{
清除超时（延迟）；
延迟=设置超时（updatePreview，300）；
});
函数updatePreview（）{
var previewFrame=document.getElementById（'preview'）；
var preview=previewFrame.contentDocument | | previewFrame.contentWindow.document；
preview.open（）；
preview.write（editor.getValue（））；
preview.close（）；
}
setTimeout（updatePreview，300）；
函数销毁ClickedElement（事件）{
document.body.removeChild（event.target）；}
函数DivGen（）{
editor.setValue（'gendiv'）；}
使用：

函数DivGen（）{
editor.replaceRange(
'gendiv\n'，{line:9，ch:0}，{line:9，ch:0}）；
}
您还可以根据光标位置来确定：

函数DivGen（）{ editor.replaceRange( 'gendiv\n'，editor.getCursor（））； }
是否可以根据文本光标的位置而不是特定的行来执行此操作？ 
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>