SimpleMDEの入力情報を別のtextareaにコピーする方法

こんにちは。hacknoteのr.katoです。

以前の記事でSimpleMDEの使用方法を紹介しましたが、SimpleMDEへ入力した情報を取得するのに手間取ったので、その方法を紹介していきます。

SimpleMDEの仕組み

そもそもSimpleMDEはtextareaタグで作った文字入力エリアにjavascriptでSimpleMDEを適応させています。
そのためユーザー側で使用しないtextareaはstyle=”display: none;”となり、非表示となります。

そして、公式のGithubによると
simplemde.value();を使えばSimpleMDEに入力した情報を取得できるとのことでしたが、うまく動作しなかったため別の方法を使用しました。

実際に作ったコードとSimpleMDE

今回は以下のコードを用意しました。
ローカル環境などで、以下のコードをコピーしてindex.htmlなどのhtmlファイルに保存すれば、
この記事と同じくSimpleMDEに入力した情報を取れる様になっています。

反映するボタンをクリックすると、SimpleMDEに入力した情報を非表示になっている、textareaに出力され、その情報を表示されているtextareaにコピーされます。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="反映させる" onClick="code_save()"/><br><br>
<textarea id="content" rows="8" cols="40"></textarea>

<textarea id="editor" rows="8" cols="40"></textarea>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
    var simplemde = new SimpleMDE({
        element: document.getElementById("editor"),
        toolbar: ["bold","strikethrough","quote","unordered-list","ordered-list","link","image","horizontal-rule", "table","preview","side-by-side","fullscreen"],
        spellChecker: false
        });

    function code_save(){
        simplemde.codemirror.save();
        $test2.val($test1.val());
    }
    var $test1 = $('#editor');
    var $test2 = $('#conten');

</script>
</body>