2017-04-10 1 views
0

풍부한 HTML 텍스트 영역에 TinyMCE를 사용하고 있습니다. DOM에 HTML을 추가하여 하나 이상의 <textarea> 태그를 동적으로 추가하고 있습니다. 각 <textarea><li> 태그 안에 삽입됩니다.TinyMCE 동적 HTML 값 문제

jQuery를 사용하여 어떻게 텍스트 영역의 HTML을 얻을 수 있습니까?. 각 tinMCE HTML 및 BODY 태그의

<html> 
 

 
<head> 
 
    <style id="mceDefaultStyles" type="text/css"> 
 
    .mce-content-body div.mce-resizehandle { 
 
     position: absolute; 
 
     border: 1px solid black; 
 
     box-sizing: box-sizing; 
 
     background: #FFF; 
 
     width: 7px; 
 
     height: 7px; 
 
     z-index: 10000 
 
    } 
 
    
 
    .mce-content-body .mce-resizehandle:hover { 
 
     background: #000 
 
    } 
 
    
 
    .mce-content-body img[data-mce-selected], 
 
    .mce-content-body hr[data-mce-selected] { 
 
     outline: 1px solid black; 
 
     resize: none 
 
    } 
 
    
 
    .mce-content-body .mce-clonedresizable { 
 
     position: absolute; 
 
     opacity: .5; 
 
     filter: alpha(opacity=50); 
 
     z-index: 10000 
 
    } 
 
    
 
    .mce-content-body .mce-resize-helper { 
 
     background: #555; 
 
     background: rgba(0, 0, 0, 0.75); 
 
     border-radius: 3px; 
 
     border: 1px; 
 
     color: white; 
 
     display: none; 
 
     font-family: sans-serif; 
 
     font-size: 12px; 
 
     white-space: nowrap; 
 
     line-height: 14px; 
 
     margin: 5px 10px; 
 
     padding: 5px; 
 
     position: absolute; 
 
     z-index: 10001 
 
    } 
 
    
 
    .mce-visual-caret { 
 
     position: absolute; 
 
     background-color: black; 
 
     background-color: currentcolor; 
 
    } 
 
    
 
    .mce-visual-caret-hidden { 
 
     display: none; 
 
    } 
 
    
 
    *[data-mce-caret] { 
 
     position: absolute; 
 
     left: -1000px; 
 
     right: auto; 
 
     top: 0; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .mce-content-body .mce-offscreen-selection { 
 
     position: absolute; 
 
     left: -9999999999px; 
 
     max-width: 1000000px; 
 
    } 
 
    
 
    .mce-content-body *[contentEditable=false] { 
 
     cursor: default; 
 
    } 
 
    
 
    .mce-content-body *[contentEditable=true] { 
 
     cursor: text; 
 
    } 
 
    
 
    img:-moz-broken { 
 
     -moz-force-broken-image-icon: 1; 
 
     min-width: 24px; 
 
     min-height: 24px 
 
    } 
 
    </style> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <link type="text/css" rel="stylesheet" href="http://localhost:62993/Content/tinymce/skins/lightgray/content.min.css"> 
 
    <link type="text/css" rel="stylesheet" href="http://localhost:62993/News/css/example.css"> 
 
</head> 
 

 
<body id="tinymce" class="mce-content-body arn_richclass" data-id="txtID0" spellcheck="false" contenteditable="true"> 
 
    <p>Test<br data-mce-bogus="1"></p> 
 
</body> 
 

 
</html>

답변

1

당신이 TinyMCE에 기본 <textarea>에서 작업하는 동안은이 업데이트되지 않습니다 있습니다. 정상적인 HTML 폼 submit을 수행하면 TinyMCE는 submit 프로세스 시작시 textarea를 업데이트 할 것입니다. 당신이 TinyMCE에 그 다른 시간에 <textarea>을 기본 업데이트에 도착해야 할 경우는 호출 할 수

tinyMCE.triggerSave(); 

이 기본 <textarea> 필드에 자신의 현재 상태를 밀어 TinyMCE에 인스턴스를 지시합니다. 그런 다음 <textarea>처럼 JavaScript를 사용하여 해당 <textarea> 필드와 상호 작용할 수 있습니다.