Appending text to text area using WYSIHTML5 and jQuery

Question

I'm using the latest (0.3.0) version of WSYIHTML5 for a message board. One of the features of the board is a quote post option. I've been trying to figure out how to append the quote to the text area.

I have the following jQuery as a test

$('.quote').click(function(){
  $('textarea').append('test this');
  alert($('textarea').text());
});

The alert shows the text has appended to the hidden textarea, but it does not update in the iframe of the WYSIHTML5 view.

What's weird is if I straight up append the text after initializing the WYSIHTML5, it appends just fine.

Any ideas on getting this to work?

you can't append to a textarea directly. You can retrieve the current value, append the text to value and update the whole value of the textarea. When updating a WYSIWYG however you generally need to do it through an API update method — charlietfl, Nov 02 '12 at 01:15

score 12 · Accepted Answer · answered Nov 02 '12 at 02:43

So in order to update the iframe and have it format any text with HTML, I did the following..

var value = editor.getValue();
var text = '<b>some text</b>;'
editor.setValue(value + text, true);

This is assuming WYSIHTML5 is instantiated under the variable 'editor'. It'll append the quote, plus format the text correctly. The boolean value is if you want the value to be run through the WYSIHTML5 parser rules.

If anyone knows a better way of doing it, I'm all ears.

Do you know if there's any way to get not the whole textarea's value, but only the current selection? — Pierlo Upitup, Nov 14 '12 at 14:44

score 1 · Answer 2 · answered Aug 20 '16 at 17:15

1

$('iframe').contents().find('.wysihtml5-editor').html('your new content  here');

answered Aug 20 '16 at 17:15

gabisajr

146
1
5

Works great bro. Thanks – Channaveer Hakari Dec 12 '17 at 10:31

score 0 · Answer 3 · answered Oct 19 '16 at 04:18

for bootstrap-wysihtml5 use following function it :

<script>

  $(function () {
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
  //  CKEDITOR.replace('editor1');
    //bootstrap WYSIHTML5 - text editor
    $(".textarea").wysihtml5();

  });



function injectString(str){
   var sel=frames[0].getSelection();
   var nd=sel.anchorNode;
   var txt=nd.data+'';
   var pos=sel.anchorOffset||0;
   sel.anchorNode.data=txt.slice(0,pos)+str+txt.slice(pos);
 }</script>

use like this

<button id="name" data-wysihtml5-command="foreFrac" onclick="injectString('{name}')" type="button" class="btn btn-block btn-success btn-lg">Name </button>

Appending text to text area using WYSIHTML5 and jQuery

3 Answers3