CODEWITHSUNDEEP
jqueryhtml
user1920656
user1920656

Reputation: 31

How to Clear the HTML Editor

I do have wysihtml5Editor, and I want to clear the value of the editor using jQuery. I have written the code as follows:

$(function () {
   $("#cleartext").live('click', function () {
    $('#def_text').wysihtml5().data("wysihtml5").editor.clear();
    });
});

<textarea  name="def_text"  id="def_text" class="w100" rows="9" cols="50" data-bind="editor: def_text"></textarea>
<button type="reset" class="btn" id="cleartext"><i class="icon-pencil"></i> New Contract</button>

I am not getting the desired result – it shows me the error that editor is not defined. Suggestions please.

Upvotes: 0

Views: 4004

Answers (7)

Arvind Krmar
Arvind Krmar

Reputation: 2602

I am using bootstrap 3 wysiHtml5 editor, and none of the solutions given here worked for me, I used this one and it worked

$('#controlid ~ iframe').contents().find('.wysihtml5-editor').html('');

Upvotes: 0

Renish Patel
Renish Patel

Reputation: 688

This worked for me, I write few lines of custom JS code. I think they can help you.

var content = $('#textareaId');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
$('#textareaId').val('');
$("#textareaId").wysihtml5();

Upvotes: 0

chura mkia
chura mkia

Reputation: 1

This worked for me. ,create a div tag, inside put your textarea element

<div id="CommentTextArea">

<textarea  name="comment_text"  id="comment"  rows="9" cols="50" ></textarea>

</div>

<button type="submit"  id="send"> Send </button>

In your .js file 

 $(function(){

// Initialize the Editor
$("#comment").wysihtml5({

toolbar: {
 "size": "xs",    //<buttonsize> // options are xs, sm, lg
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false, // Blockquote

}
});

// when the send button is clicked

$('#send').click(function(){

   setTimeout(function(){
        //remove  wysihtml5Editor contents  
   $("#CommentTextArea").html('<textarea  name="comment_text"  id="comment"  rows="9" cols="50" ></textarea>');

// and then Initialize the Editor again,

$("#comment").wysihtml5({

toolbar: {
 "size": "xs",    //<buttonsize> // options are xs, sm, lg
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false, // Blockquote
   }});

     }, 1000);   

});



    });

Upvotes: 0

Srikanth Jeeva
Srikanth Jeeva

Reputation: 3011

I had to do this to clear the data in my single page application:

When I tried 

('#comments').data("wysihtml5").editor.clear() // Got error **Uncaught TypeError: Cannot read property 'editor' of undefined**

When I tried 

var editor = $('#comments').wysihtml5();
editor.clear(); // This clears only the textarea which is hidden. Did not clear the Editor.

So this is what I did, (Might not be a good approach, but this cleared my textarea)

$(".wysihtml5-sandbox").remove();
$("#comments").show();
$('#comments').val('');

and then Initialize the Editor again,

var editor = new wysihtml5.Editor("comments", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules, // defined in parser rules set
  stylesheets: "/cca/css/richtext.css"
});

Upvotes: 0

UbiK
UbiK

Reputation: 31

I think you're making it too complex. Just set your variable and link it to your textarea and then use only the variable :

var editor = new wysihtml5.Editor("myTextarea");
editor.clear();

or 

editor.setValue('', true);

Worked for me.

Upvotes: 3

Fluoxetine
Fluoxetine

Reputation: 195

It seems to me that you're making this more complicated than necessary. How about you just try:

$("#cleartext").click(function () {
    $('#def_text').val('');
});

See this fiddle.

Upvotes: 0

Cianan Sims
Cianan Sims

Reputation: 3429

Are you initializing correctly? The docs show something like this:

$(function () {
    var editor = new wysihtml5.Editor("def_text");

    $("#cleartext").on('click', function () {
        $('#def_text').data("wysihtml5").editor.clear();
    });
});

Or, closer to yours,

var wysihtml5Editor = $('#def_text').wysihtml5();

Upvotes: -1

Related Questions