Q&A
ぱっとみ実装が無限ループに見えるのだが
Div要素をcontenteditable="true"で編集できるようにしてマークダウンエディタを作りたいのですが、innerHtmlの動作がわからないところがあったので質問します。
文字が入力されるとdiv要素(IDはMyEditableId)の文字をMarked.jsでHTMLに変換して、innerHtmlでdiv要素にセットしてます。
しかし、innerHtmlをしてもマークダウンの文のままでhtmlとして表示はされてません。。。
でも、ちゃんとhtmlには変換できているようなので謎です。
どうやったら、htmlに変換された状態で表示されるか教えてください。
ちなみにSimpleMDEのようなものを目指してます。
html
1<!DOCTYPE html> 2<html> 3<head> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 5<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 6<script type="text/javascript"> 7 8$(document).ready(function() { 9 $('#MyEditableId').on('DOMSubtreeModified propertychange', function() { 10 var md = marked($('#MyEditableId').html()); 11 12 $('#MyEditableId').innerHtml = md; 13 14 }); 15 16}); 17 18</script> 19</head> 20<body> 21 22 <div id="MyEditableId" contenteditable="true" style="width:300px;height:300px;background-color: gray;"> 23 </div> 24 25</body> 26</html> 27
自分もそう思ってたのですが、よくわかりません。。具体的にどこらへんが問題なのでしょうか？
同じ要素のinnerHTMLをmarkedして自分自身に設定すると無限ループになるのではないでしょうか？asahina1979さんはそう指摘しているような気が。ところでイベントハンドラーの関数本体では$(this)を使った方がtypo防止になるのでは？
回答1件
0
ベストアンサー
JavaScript
1$('#MyEditableId').innerHtml = md;
innerHtml ではなく、innerHTMLですが、$('#MyEditableId') はjQueryオブジェクトなので、innerHTMLを持ちません。
JavaScript
1document.getElementById('MyEditableId').innerHTML = 'replaced';
Re: URON さん
投稿2017/11/22 13:39
編集2017/11/22 13:42
総合スコア18162
あなたの回答
tips
プレビュー
