リンク
本文
https://qiita.com/_carbonara_/items/274b26ae45c7d4372bdf をもとにブラウザ上でうごくマークダウンエディタを作ってみました。
といってもそのままコピーしているわけではなくqiitqのように左にマークダウン、右にHTMLが出るようにしました。
また、HTMLテキストで出力されたテキストをクリックすればそのままクリップボードにコピーされるようにしました。 今回始めてulkitを使ってみたのですが、コピーされたことがわかるようにトースト(notification)できるのは素晴らしいと思います。
蛇足
http://md2pdf.higty.xyz/md2html
このサイトが使えなくなっていたので作ったのですがなにかあったのでしょうか。
元ソースとの比較
比較.diff
5c5
< <title>test</title>
---
> <title>Markdown→HTML変換</title>
17c17
< <body>
---
> <body width="100%">
19,21c19,21
< <div class="editor uk-container uk-margin-small">
< <h2>Markdownの入力フォーム</h2>
< <form id="editor-form" class="">
---
> <div class="editor uk-container uk-margin-small" width="100%">
> <div style="width:50%;float:left;">
> <h2>Markdownの入力フォーム</h2>
23,28d22
< </form>
< <button type="button" onclick="draw_preview()" class="uk-button uk-button-default uk-margin-auto">Preview</button>
<
< <h2>HTMLに変換した結果</h2>
< <div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
< <div class="preview" id="marked-preview"></div>
30,32c24,33
<
< <h2>変換結果コピペエリア</h2>
< <textarea onclick="this.select();" id="result" class="uk-textarea" name="result" rows="8" cols="100" readonly></textarea>
---
> <div style="width:50%;float:right;">
> <h2>HTMLに変換した結果</h2>
> <div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
> <div class="preview" id="marked-preview"></div>
> </div>
> </div>
> <div style="clear: both;">
> <h2>変換結果コピペエリア</h2>
> <textarea onclick="this.select();document.execCommand('copy');UIkit.notification('コピーしました');" id="result" class="uk-textarea" name="result" rows="8" cols="100" readonly></textarea>
> </div>
35c36
< <p class="uk-text-center">Copyright 2018 konightch All Rights Reserved.</p>
---
> <p class="uk-text-center">Copyright 2018 konightch & misogihagi All Rights Reserved.</p>
43a45
> (function() {
45,46d46
< </script>
< <script>
51a52,55
> simplemde.codemirror.on("change", function(){
> draw_preview()
> });
> })();