ACE エディターをサイトに埋め込むことに成功しましたが、読み取り専用モードに戻り続けます。初めてカーソルをエディターに入れると、テキストを入力できますが、マウスを動かしてカーソルを別の場所に置くと、入力できなくなります。エディターのプロパティを確認すると、読み取り専用が true に設定されているようです。
更新:
読み取り専用とは関係がないようです(同じ動作を示しているだけです)。エディターにカーソルを置くと、入力したテキストが受け入れられることに気付きました。カーソルを別の場所に設定すると、テキストエリアの位置が更新され、それ以降、入力したテキストは、ここでは入力できないような「ディン」音になります。Windows の警告メッセージのようなものです。
とにかく、div コンテナの 1 つを別のディスプレイまたは位置タイプに設定すると、突然正常に動作するようになりましたが、エディタの位置が正しくありません。
エディターの外側をクリックしてからエディターに戻ると、もう一度入力できます...少なくとも、前に説明したようにカーソルを移動するまでは。
これが前(作業中)です:
<div style="position: absolute; background-color: rgb(255, 255, 255); border: 0px none; overflow: auto; display: block; left: 316px; top: 239px; width: 1074px; height: 140px;" id="editor0"><div id="iframe_editor0" frameborder="0"><div class=" ace_editor ace_nobold ace-crimson-editor" id="editor" style="display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;"><textarea style="bottom: 92px; height: 16px; width: 7.2px; right: 1019.6px;" spellcheck="false" wrap="off" class="ace_text-input"></textarea><div style="display: none;" class="ace_gutter"><div style="margin-top: 0px; height: 172px; width: 34px;" class="ace_layer ace_gutter-layer"><div class="ace_gutter-cell " style="height:16px;">1</div><div class="ace_gutter-cell " style="height:16px;">2</div><div class="ace_gutter-cell " style="height:16px;">3</div><div class="ace_gutter-cell " style="height:16px;">4</div></div><div style="top: 32px; height: 16px;" class="ace_gutter-active-line"></div></div><div style="left: 0px; right: 15px;" class="ace_scroller"><div style="margin-top: 0px; width: 1066px; height: 172px;" class="ace_content"><div class="ace_layer ace_print-margin-layer"><div style="left: 580px; visibility: hidden;" class="ace_print-margin"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height:16px;top:32px;left:0;right:0;"></div></div><div style="padding: 0px 4px;" class="ace_layer ace_text-layer"><div class="ace_line" style="height:16px"><span class="ace_meta ace_tag"><</span><span class="ace_meta ace_tag ace_tag-name">div</span> <span class="ace_entity ace_other ace_attribute-name">style</span><span class="ace_keyword ace_operator">=</span><span class="ace_string">"position:relative;width:640px;height:500px;font-family:Arial;font-size:12px;margin:0 auto;left:8px;top:14px;background-color:#FFFFFF;"</span><span class="ace_meta ace_tag ace_r">></span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_meta ace_tag"></</span><span class="ace_meta ace_tag ace_tag-name">div</span><span class="ace_meta ace_tag ace_r">></span></div><div class="ace_line" style="height:16px"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div style="left: 47.2px; top: 32px; width: 7.2px; height: 16px;" class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">X</div><div style="width: 20px; height: 140px;" class="ace_scrollbar"><div style="height: 64px;" class="ace_scrollbar-inner"></div></div></div></div></div>
そして、カーソルの位置を変更した後/新しい場所でマウスをクリックした後(動作していません):
<div style="position: absolute; background-color: rgb(255, 255, 255); border: 0px none; overflow: auto; display: block; left: 316px; top: 239px; width: 1074px; height: 140px;" id="editor0"><div id="iframe_editor0" frameborder="0"><div class=" ace_editor ace_nobold ace-crimson-editor ace_focus" id="editor" style="display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;"><textarea style="bottom: 92px; height: 16px; width: 7.2px; right: 1019.6px;" spellcheck="false" wrap="off" class="ace_text-input"></textarea><div style="display: none;" class="ace_gutter"><div style="margin-top: 0px; height: 172px; width: 34px;" class="ace_layer ace_gutter-layer"><div class="ace_gutter-cell " style="height:16px;">1</div><div class="ace_gutter-cell " style="height:16px;">2</div><div class="ace_gutter-cell " style="height:16px;">3</div><div class="ace_gutter-cell " style="height:16px;">4</div></div><div style="top: 32px; height: 16px;" class="ace_gutter-active-line"></div></div><div style="left: 0px; right: 15px; overflow-x: hidden;" class="ace_scroller"><div style="margin-top: 0px; width: 1066px; height: 172px;" class="ace_content"><div class="ace_layer ace_print-margin-layer"><div style="left: 580px; visibility: hidden;" class="ace_print-margin"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height:16px;top:32px;left:0;right:0;"></div></div><div style="padding: 0px 4px;" class="ace_layer ace_text-layer"><div class="ace_line" style="height:16px"><span class="ace_meta ace_tag"><</span><span class="ace_meta ace_tag ace_tag-name">div</span> <span class="ace_entity ace_other ace_attribute-name">style</span><span class="ace_keyword ace_operator">=</span><span class="ace_string">"position:relative;width:640px;height:500px;font-family:Arial;font-size:12px;margin:0 auto;left:8px;top:14px;background-color:#FFFFFF;"</span><span class="ace_meta ace_tag ace_r">></span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_meta ace_tag"></</span><span class="ace_meta ace_tag ace_tag-name">div</span><span class="ace_meta ace_tag ace_r">></span></div><div class="ace_line" style="height:16px"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer"><div style="left: 47.2px; top: 32px; width: 7.2px; height: 16px; opacity: 0;" class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">X</div><div style="width: 20px; height: 140px;" class="ace_scrollbar"><div style="height: 64px;" class="ace_scrollbar-inner"></div></div></div></div></div>
前のコードは body タグの中にあるものです。
更新 2
エディタが Flash / Flex アプリの上にある場合、問題が発生しているようです。Flash / Flex アプリを半分の高さに設定すると、その下に Flash アプリがなくなった領域が正しく機能しました。繰り返しますが、これは Firefox Mac でのみ発生しています。Mac の Safari では正しく動作します。