boeing
boeing

Reputation: 302

How do I deactivate Bootstrap-wysihtml5 jquery editor instance?

I'm using the Bootstrap-wysihtml5 jquery plugin (https://github.com/jhollingworth/bootstrap-wysihtml5/) to convert textareas to WYSIWYG. I would like to be able to activate and deactivate the editor by clicking on 2 buttons, so far i can show the editor, please will you let me know how i can deactivate the editor and leave just the textarea and its value. My code is as follows:-

HTML

<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>

<input type="button" id="button1" value="Show Editor"> 
<input type="button" id="button2" value="Hide Editor">

Script

$("#button1").click(function(){
$('textarea').wysihtml5();
});

$("#button2").click(function(){
// this is where i'm stuck
});

Thank you

Upvotes: 3

Views: 9307

Answers (2)

Yura Galavay
Yura Galavay

Reputation: 456

A few lines of custom JS code. I think they can help you.

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

Upvotes: 4

Pedro Rio
Pedro Rio

Reputation: 1444

I had the same problem trying to disable/hide the toolbar and editor and had luck with the following commands (to disable the editor). I'm using version wysihtml5-0.3.0_rc2.js)

$('#editorId').data('wysihtml5').editor.composer.disable();
$('#editorId').data('wysihtml5').editor.composer.enable();

or (to hide the editor)

$('#editorId').data('wysihtml5').editor.composer.hide();
$('#editorId').data('wysihtml5').editor.composer.show();

To do the same to the toolbar you do the following to hide/show (can't find a wat to disable the toolbar):

$('#editorId').data('wysihtml5').editor.toolbar.hide();
$('#editorId').data('wysihtml5').editor.toolbar.show();

Upvotes: 3

Related Questions