mark yorky mark yorky - 1 month ago 14
jQuery Question

Insert text to wysiwyg from dropdown

Is there a way on how to insert texts to bootstrap wysiwyg using jquery?
By the way, I used bootstrap-wysihtml5 from this page http://jhollingworth.github.io/bootstrap-wysihtml5/
Texts are actually a template from a dropdown then onchange value selected should be inserted on the wysisyg.

I tried this code but it only inserts the texts on the hidden textarea not on the wysiwyg

$(document).ready(function(e) {
$("#template").change(function(){
var template = $("#template").val();
if(template != '') {
$('.textarea, .wysihtml5-sandbox').append(template);
}
});
});

Answer

You can't simply access the textarea from the containing page's DOM since the actual WYSIWYG editor is in an iFrame with .wysihtml5-sandbox. So to access the iFrame's DOM and modify it, we'll have to first access the iFrame DOM:

  $('.wysihtml5-sandbox').contents() 
  //Now we have the iFrame DOM to apply selectors to

  $('.textarea', $('.wysihtml5-sandbox').contents())
  //Now we have access to the textarea which contains the editor's current text

  $('.textarea', $('.wysihtml5-sandbox').contents()).append('Hello World!')
  //Now we have appended content to the editor view, the original goal 

Extra stuff:

$('.textarea', $('.wysihtml5-sandbox').contents()).removeClass('placeholder')
//Stops the text from being formatted as a placeholder (i.e. grayed out)
$('.textarea', $('.wysihtml5-sandbox').contents()).empty()
//Remove the existing placeholder text by emptying the textarea content
Comments