jHtmlArea는 실제로 작은 편집 영역을 만듭니다.

알아낼 수없는 문제가 있습니다. jQuery v3.2.1과 함께 jHtmlArea 0.8을 사용하고 있습니다. 나는 HTML 편집 영역으로 변환하기 위해 jHTMLArea를 사용하고있는 TEXTAREA가있는 대화 상자를 만들었습니다.jHtmlArea는 실제로 작은 편집 영역을 만듭니다.

내 문제는 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 기능을위한 자바 스크립트입니다 ... 미리

$(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"); 
}

감사합니다!

출처

2017-12-01 Menachem Bazian

코드를 검사 할 때 <iframe style="height: 0px; width: 700px;"></iframe>을 확인하십시오. 원하는 높이로 높이를 변경하면 효과가 있습니다. jQuery로 작업하는 경우 CSS 규칙을 지정하여 해결할 수 있습니다. 만약 당신이 몇 가지 코드를 게시 할 수 있습니다, 우리는 함께 포크 수 있습니다.

출처

2017-12-01 17:16:34 sgerbhctim

코드를 추가했습니다. iframe은 htmlarea 호출에 의해 추가되므로 실제로 제어 할 수는 없습니다 ... –

확인. 나는 새로운 질문 (내가 별도로 게시 할 것으로 짐작한다)이 남아 있지만이 답변을 가지고있다 ...

문제는 한 번만 (편집 중) 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 호출을 추가하면 올바르게 크기가 조정됩니다. 나머지는 다른 질문의 대상이 될 것입니다.

출처

2017-12-04 15:27:59

jHtmlArea는 실제로 작은 편집 영역을 만듭니다.

답변

관련 문제