jQuery div to textarea wrap unwrap unwrapinner

Pin*_*kie 0 javascript jquery

我想使用jwysiwyg https://github.com/akzhan/jwysiwyg,但我想将它应用于div元素而不是textarea.我不认为该插件允许使用div.因此,在申请之前,我需要在点击时将div转换为textarea .jwywiwig().

我要实现

<div style="width:300px;height:200px; background:red">testing</div>
Run Code Online (Sandbox Code Playgroud)

进入这个

<textarea style="width:300px;height:200px; background:red">testing</textarea>
Run Code Online (Sandbox Code Playgroud)

我如何在div中维护内联样式和html时这样做.

Hus*_*ein 6

更好的方法是使用wrapInner() ,这样您就不必担心复制文本或样式了.你要做的只是包装和打开.

包装做这个

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

内联样式是这样textarea在父div上占据全宽和高度,并且还显示父div的背景颜色.

要解开textarea,请执行此操作

$("#test").html($('#test textarea').val());
Run Code Online (Sandbox Code Playgroud)