質問

JavaScriptのCodeMirrorで、
ボタンが押されたらCodeMirrorを反映させたTextareaをクリアしたいと思い、
色々調べた結果、以下のコードにたどり着きました。

html
1<textarea id="scenario-area" class="lined"></textarea>

JavaScript
1// CodeMirror用のハンドルを取得
2var editor = CodeMirror.fromTextArea(document.getElementById("scenario-area"), {
3	mode: "text/html",
4	lineNumbers: true,
5});
6
7// すでにあるデータを初期化
8editor.setValue("");
9
10// ヒストリー（元に戻すの履歴）を削除
11editor.clearHistory();
12
13// ガターをクリア？
14editor.clearGutter();
15
16/*この後、別のデータをセットしたい*/
17// データをセット
18editor.setValue('hogehoge');
19

※参考

しかし、以下の図のようにスクロールすると以前の物が残っています。
……と言うより、下に前の文章が押し出されてしまっています。

消去前

消去後

この現象をなくし、エディタ部分をクリアするにはどうすればよろしいでしょうか？
ご存知の方がいらっしゃいましたら、ご教示頂けますと幸いです。
よろしくお願いいたします。

環境

MacOS X Yosemite
FireFox 50.0.1
CodeMirror 5.22.1

行動規範の内容に同意します

回答2件

ベストアンサー

こんないいのがあるんですね
少し改造して試してみましたが問題なく表示されました
Windows8.1
FireFox 50.1.0
CodeMirror 5.22.0?…current version: 5.22.1をダウンロードするとcodemirror-5.22.0のフォルダになる

html
1<html>
2<head>
3<title></title>
4<link href="codemirror-5.22.0/lib/codemirror.css" rel="stylesheet" type="text/css" />
5<script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
6<script src="codemirror-5.22.0/lib/codemirror.js"></script>
7<script src="codemirror-5.22.0/mode/css/css.js"></script>
8<script src="codemirror-5.22.0/mode/htmlmixed/htmlmixed.js"></script>
9<script src="codemirror-5.22.0/mode/javascript/javascript.js"></script>
10<script src="codemirror-5.22.0/mode/xml/xml.js"></script>
11<script src="codemirror-5.22.0/addon/edit/closebrackets.js"></script>
12<!--
13<script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
14<script src="//cdn.jsdelivr.net/codemirror/4.5.0/codemirror.min.js"></script>
15<script src="//cdn.jsdelivr.net/g/codemirror@4.5.0(mode/css/css.js+mode/htmlmixed/htmlmixed.js+mode/javascript/javascript.js+mode/xml/xml.js+addon/edit/closebrackets.js)"></script>
16-->
17
18<style>
19.CodeMirror {
20 border: 1px solid #eee;
21 width:100%;
22 height:200px;
23}
24</style>
25</head>
26<body>
27 <textarea id="scenario-area" class="lined"></textarea>
28 <button id="clr_btn">CLR</button>
29 <button id="add_btn">このHTMLソースを貼る</button>
30 <script type="text/javascript">
31 //<!--
32 $(function(){
33  // CodeMirror用のハンドルを取得
34  var editor = CodeMirror.fromTextArea($("#scenario-area").get(0), {
35    mode: "htmlmixed",
36    lineNumbers: true,
37    indentUnit: 4,
38    autoCloseBrackets: true
39  });
40  /* すでにあるデータを初期化;
41  editor.setValue("");
42  // ヒストリー（元に戻すの履歴）を削除;
43  editor.clearHistory();
44  // ガターをクリア？;
45  editor.clearGutter();
46  //この後、別のデータをセットしたい;
47  // データをセット;*/
48  editor.setValue('hogehoge');
49  //##########################
50  $("#clr_btn").click(function(){
51   editor.setValue("");
52  });
53  //##########################
54  $("#add_btn").click(function(){
55   editor.setValue($("html").html());
56  });
57 });
58 //-->
59 </script>
60</body>
61</html>

投稿2017/01/04 12:28

退会済みユーザー

総合スコア0

nnahito

2017/01/04 18:59

ご回答ありがとうございます。コードを全て貼って頂き、ありがとうございます！大変参考になりました！原因は、私が理解もせずコピペで作っていたことでした… jQueryの$(document).readyでCodeMirrorをTextareaに反映させ、内容の入れ替えのときに、再度CodeMirrorをTextareaに反映させていた事が原因でした。理解不足が恥ずかしいです。本当に有難うございました！すごく分かりやすかったです！！

退会済みユーザー

2017/01/04 19:05

こちらのページを参考にするといいものが作れそうです http://tnomura9.exblog.jp/22787344/

行動規範の内容に同意します

setValueでエディタの内容を設定できるので、それを使います。
質問者さんのコードがCodemirror5.22.0だと無事に動いたので、一度5.22.0で試してみては？
動作確認済みブラウザ

Opera 42.0
Firefox 50.0.2
Google Chrome 55.0
Internet Explorer 11.0

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.css">
7</head>
8<body>
9<label>なにかをかくところ
10    <textarea id="scenario-area" class="lined"></textarea>
11</label>
12<input id="resetButton" type="button" value="リセット">
13<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
14<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.js"></script>
15<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/css/css.js"></script>
16<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/htmlmixed/htmlmixed.js"></script>
17<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/javascript/javascript.js"></script>
18<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/xml/xml.js"></script>
19<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/addon/edit/closebrackets.js"></script>
20<script>
21    var editor = CodeMirror.fromTextArea(document.getElementById("scenario-area"), {
22        mode: "text/html",
23        lineNumbers: true,
24    });
25
26    document.getElementById("resetButton").addEventListener("click", function () {
27        editor.setValue("");//テキストエリアの内容を設定
28        editor.clearHistory();//変更履歴の削除
29        editor.clearGutter();//行数表示を削除(初期値に戻る)
30        editor.setValue("hogehoge");//hogehogeをセット
31    }, false);
32</script>
33</body>
34</html>