How to get editor object in twitter Bootstrap WYSIWYG5

Question

I am using Bootstrap wysiwyg5 editor as a part of a form.

This text area happens to be a required field(should not be empty). I want to validate if the user has entered any value on to this field or not. I see that Bootstrap wysiwyg uses a Iframe to display the content. I tried to access the content of the iframe's body in jQuery by doing this:

$('.textarea.wysihtml5-editor').html()

but failed.

My question is: How do I check if the user has entered some text in this Bootstrap wysiwyg textarea. Please help me out.

Unless I'm missing something, I don't see any iframes in their demo. It's just a div that is `contenteditable` — Ian, Jun 06 '13 at 14:22
http://mindmup.github.io/bootstrap-wysiwyg/ - There is no iframe. It's `
` — Ian, Jun 06 '13 at 14:32
@lan ah.. yours seem to be little different from what am using : http://jhollingworth.github.io/bootstrap-wysihtml5/ — codeMan, Jun 06 '13 at 14:39
@codeMan Ooohh, I had no idea there were 2! Sorry for the confusion :) — Ian, Jun 11 '13 at 16:15

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

Have you tried this question?

How to access the content of an iframe with jQuery?

The answer from the question referenced above:

$("#myiframe").contents().find("#myContent")

Edited to add my original answer:

$('.textarea.wysihtml5-editor').val()

edited May 23 '17 at 11:57

Community

1
1

answered Jun 06 '13 at 14:21

asafreedman

572
4
10

WOW!! it worked!!only god knows how long I have been stuck with this.... thanks a lot!! – codeMan Jun 06 '13 at 14:29
can you included the statement in your answer that u had written before, so that I can accept the answer? – codeMan Jun 06 '13 at 14:30
What I had written before was before I realized you were referring to a iframe. Do I need to write some code in there for it to be accepted? – asafreedman Jun 06 '13 at 14:41
I just appended the answer from the link that I referenced from @mbillard. – asafreedman Jun 06 '13 at 14:44
1

Oh, that's great. Glad I could help. I'm sure we all know how it feels to spin on something when you're only a step away. I added my original answer too. – asafreedman Jun 06 '13 at 17:39

score 1 · Answer 2 · 2013-07-09T19:32:57.523

1

wysiwyg editor does not works in bootstrap modal because it triggers before creating modal.. or something. so the best way to do it is triggering the modal before wysiwyg editor.

function showmymodal(){
$('#modal').modal('show');
$("#modal").html(' <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">modal header</h3></div>
<div class="modal-body">
<textarea id="textarea"></textarea>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>');
$('#textarea').wysihtml5({
"font-styles": true, 
"emphasis": true,
"lists": true, 
"html": false, 
"link": true, 
"image": true, 
"color": true 
});
}

you can check on Tutorial website

edited Jul 09 '13 at 19:32

answered Jul 08 '13 at 16:07

1

Welcome to Stack Overflow. Please summarise the link in your answer; that way, if the link goes stale the answer won't be completely useless. – michaelb958--GoFundMonica Jul 08 '13 at 16:23
@Debashis Dip Thanks for your answer. That was not my concern, I was not trying make WYSIHTML5 work in a Modal. – codeMan Jul 09 '13 at 18:00
sorry,for checking iframe val you should use $("#textarea").val(); – Jul 09 '13 at 19:30

How to get editor object in twitter Bootstrap WYSIWYG5

2 Answers2