Mam dwa pola wysihtml5, które pojawiają się na stronie. Chciałbym móc zaktualizować obszar tekstowy class="vLargeTextField" z tekstem z class="vLargeTextField wysihtml5-editor" w czasie rzeczywistym i odwrotnie. Jeśli zaktualizuję id="user_input" class="vLargeTextField wysihtml5-editor" temu id="user_input" class="vLargeTextField" powinien zaktualizować dla odpowiedniego wejścia.
Próbowałem zrobić kilka rzeczy w następujący sposób:
Userinput1 = $(".wysihtml5-sandbox").contents().find("body").html()
Działa świetnie, gdybym miał tylko jeden edytor na ekranie. Powraca user_input, ale jeśli zaktualizuję user_input2, z podobną linią kod nie będzie. Również jeśli zaktualizuję user_input lub user_input2, Chciałbym zaktualizować odpowiedni class="vLargeTextField wysihtml5-editor" z danymi wejściowymi z user_input 1 lub 2.
Każda pomoc w tym zakresie byłaby bardzo wdzięczna. Zobacz poniższy kod.
<div name="newboxes" id="user_input" class="text">
<div style="display:inline-block">
<textarea class="vLargeTextField" cols="80" id="user_input" name="results" rows="20" style="width: 640px; height: 200px; margin: 0px auto; display: none;"></textarea>
<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="background-color: rgb(255, 255, 255); border-collapse: separate; border: 0.9090908765792847px solid rgb(204, 204, 204); clear: none; display: inline-block; float: none; margin: 0px auto; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 3.9914772510528564px 5.994318008422852px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; border-top-right-radius: 3.9914772510528564px; border-bottom-right-radius: 3.9914772510528564px; border-bottom-left-radius: 3.9914772510528564px; border-top-left-radius: 3.9914772510528564px; width: 640px; height: 200px;"></iframe>
#document
<html>
<body marginwidth="0" marginheight="0" contenteditable="true" class="vLargeTextField wysihtml5-editor" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13.63636302947998px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
"Some Text Here"
</body>
</html>
</div>
</div>
<div name="newboxes" id="user_input2" class="text">
<div style="display:inline-block">
<textarea class="vLargeTextField" cols="80" id="user_input2" name="results" rows="20" style="width: 640px; height: 200px; margin: 0px auto; display: none;"></textarea>
<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="background-color: rgb(255, 255, 255); border-collapse: separate; border: 0.9090908765792847px solid rgb(204, 204, 204); clear: none; display: inline-block; float: none; margin: 0px auto; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 3.9914772510528564px 5.994318008422852px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; border-top-right-radius: 3.9914772510528564px; border-bottom-right-radius: 3.9914772510528564px; border-bottom-left-radius: 3.9914772510528564px; border-top-left-radius: 3.9914772510528564px; width: 640px; height: 200px;"></iframe>
#document
<html>
<body marginwidth="0" marginheight="0" contenteditable="true" class="vLargeTextField wysihtml5-editor" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13.63636302947998px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
"Some Text Here"
</body>
</html>
</div>
</div>
Odpowiedzi:
0 dla odpowiedzi № 1Twoje pytanie odpowiedziało na mój problem. W twoim przypadku właśnie dodałem identyfikator do selektora jQuery
Userinput = $("#user_input .wysihtml5-sandbox").contents().find("body").html()
Userinput1 = $("#user_input1 .wysihtml5-sandbox").contents().find("body").html()