jQuery div to textarea wrap unwrap unwrapinner

Question

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

我想制作

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

进入这个

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

如何在div中维护内联样式和html时执行此操作。

Answer 1

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

要执行此操作

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

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

要解开textarea，请执行此操作

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

Answer 2

嗯，你可以做到以下几点：

var textarea = $('<textarea/>');
textarea.attr('style', $(div).attr('style'));
textarea.text($(div).text());
$(div).replaceWith(textarea);

创建文本区域，复制CSS并替换div。

Answer 3

您可以获取style的{​​{1}}属性及其文本，然后将div替换为具有div属性的textarea和文本设置为style：

的文本

div

演示：http://jsfiddle.net/bQTGE/1/

一些文档：

• var $div = $('div'), text = $div.text(), style = $div.attr('style'); $div.replaceWith('<textarea style="' + style + '">' + text + '</textarea>'); ：http://api.jquery.com/text
• .text()：http://api.jquery.com/attr
• .attr()：http://api.jquery.com/replacewith

<强>更新

如果您想在点击它时将.replaceWith()变为div，然后当您离开textarea时，它会变回textarea：

HTML -

div

JavaScript -

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

以下是演示：http://jsfiddle.net/bQTGE/3/