Question

I want to use jwysiwyg https://github.com/akzhan/jwysiwyg but i want it to be applied to a div element instead of textarea. I don’t think the plugin allow for using div. So i need to make div convert to textarea when clicked on before applying .jwywiwig() to it.

I want to make

<div style="width:300px;height:200px; background:red">testing</div>

Into this

<textarea style="width:300px;height:200px; background:red">testing</textarea>

How do i do this while maintaining the inline styling and html inside the div.

Answer 1

A better way to do this is to user wrapInner()
That way you don’t need to worry about copying the text or styles. All you do is wrap and unwrap.

To wrap do this

$('#test').wrapInner('<textarea style="width:100%; height:100%; background-color:transparent; border:0"/>'); 

The inline styling is so the textarea takes full width and height on the parent div and also shows the background color of the parent div.

To unwrap the textarea do this

$("#test").html($('#test textarea').val());