jHtmlAreaは本当に小さな編集エリアを作成します

Question

私は理解できないような問題があります。私はjHtmlArea 0.8をjQuery v3.2.1と共に使用しています。私は、HTML編集エリアに変換するためにjHTMLAreaを使用しているTEXTAREAでダイアログを作成しました。

私の問題は、HTMLAreaが作成されているように見えますが、実際には私に編集領域が与えられていないことです。高さを制御する方法があるかどうかを調べましたが、ソースコードに表示されている内容に基づいて、HTMLAreaの高さはテキストエリアのサイズと一致する必要があります。私は私のCSSをチェックしており、これを引き起こす可能性のあるものは見つけられません。

私はhttp://issuesnj.com/sample/にオンラインでページの簡略化されたバージョンを（すべてのカスタムコードはインラインで）掲載しました。 +ボタンをクリックするだけで問題が表示されます。私はこれに関する援助に感謝します。

ここで有効なコードは、ダイアログのHTML定義とJavaScriptです。ここで彼らは、次のとおりです。

<div id="divEdit"> 
    <table> 
     <tr> 
      <td>Page Name</td> 
      <td><input name="pageName" id="pageName" style="width:400px" type="text"></td> 
     </tr> 
     <tr> 
      <td>Page Title (shows on the tab)</td> 
      <td><input name="pageTitle" id="pageTitle" style="width:400px" type="text"></td> 
     </tr> 
     <tr> 
      <td>Page Caption</td> 
      <td><input name="pageCaption" id="pageCaption" style="width:400px" type="text"></td> 
     </tr> 
     <tr> 
      <td>After upload URL</td> 
      <td><input name="afterProcView" id="afterProcView" style="width:400px" type="text"></td> 
     </tr> 
     <tr> 
      <td colspan="2"><br>Page Text:</td> 
     </tr> 
     <tr> 
      <td colspan="2"><textarea name="pageText" id="pageText" rows="20" style="width: 700px;"></textarea></td> 
     </tr> 
    </table> 
</div> 

ここhtmlareaコールを持ち、ダイアログとfnAdd機能のためのjavascriptは...事前に

$(document).ready(function(){ 
    $("#divEdit").dialog({ 
     "autoOpen": false, 
     "width": "auto", 
     "title": "Page Settings", 
     "open": function (evt, ui) { 
      $("#pageText").htmlarea(); 
     }, 
     "buttons": 
     [ 
      {"text": "Save", 
      "click": function(){$("#divEdit").dialog("close");} 
      }, 
      {"text": "Cancel", 
      "click": function(){$("#divEdit").dialog("close");} 
      } 
     ] 
    }); 
}); 

function fnAdd(){ 
    $("#id").val("New"); 
    $("#pageName").val(""); 
    $("#pageTitle").val(""); 
    $("#pageCaption").val(""); 
    $("#pageText").htmlarea('html', '\b'); 
    $("#afterProcView").val(""); 
    $("#divEdit").dialog("open"); 
} 

感謝です！

Answer 1

コードを確認したら、<iframe style="height: 0px; width: 700px;"></iframe>にお気付きの点があります。高さをあなたが望むものに変えれば、それはうまくいくはずです。 jQueryを使用している場合は、CSSルールを指定して修正することもできます。私はいくつかのコードを投稿することができれば、私たちはそれをフォークすることができます。

Answer 2

OK。私は新しい質問（私は別に投稿すると思います）が残っていますが、私にはこの回答があります...

問題は私がhtmlarea（）を編集中に一度し​​か使っていないことでした。私は、文書準備機能でhtmlareaを初期化する必要がありました。したがって、変更されたコードは次のようになります。

$(document).ready(function(){ 
    $("#pageText").htmlarea(); 

    $("#divEdit").dialog({ 
     "autoOpen": false, 
     "width": "auto", 
     "title": "Page Settings", 
     "open": function (evt, ui) { 
      $("#pageText").htmlarea(); 
     }, 
     "buttons": 
     [ 
      {"text": "Save", 
      "click": function(){$("#divEdit").dialog("close");} 
      }, 
      {"text": "Cancel", 
      "click": function(){$("#divEdit").dialog("close");} 
      } 
     ] 
    }); 
}); 

一度、汎用htmlalrea呼び出しを追加すると、適切なサイズになります。残りについては、別の質問の対象になります。