隐藏 Div 中的 NicEdit 被调整小

Question

我正在尝试使用 NicEdit 编辑器来隐藏在 div 中的文本区域。当用户单击按钮时，目标文本区域的父 div 就会显示。文本区域的宽度设置为父级 div 的 100%。问题是父 div 被隐藏，因此在显示父 div 之前 textrea 没有宽度。如果我尝试在显示其父 div 的同时附加 NicEdit 编辑器，则编辑器会显得很小。

<script type="text/javascript">

function add_task_editor() {
        new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','ul','link']}).panelInstance('task_description');
    };

$('#trigger_it').click(function (e) {
 $('#parent_div').show();
 add_task_editor();

});
</script>
<div id="parent_div" style="display: none;">
<textarea id="task_description"></textarea>
</div>

有没有办法解决这个问题，以便编辑器的宽度在加载后设置为父 div 的 100%？

Answer 1

当然，基本上在创建编辑器之后，检查它以查找它的 ID 或它所具有的类，并设置它的宽度 $('#editorsID').width('100%'); 例如。

或者也许找到它的父 div 的宽度（以像素为单位）并将其设置为该宽度。

Answer 2

在我的情况下，这与jQuery一起工作：

new nicEditor().panelInstance('myArea');

$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');

.

或绝对宽度：

$('.nicEdit-panelContain').parent().width('400px');
$('.nicEdit-panelContain').parent().next().width('400px');

.

Answer 3

@hans的答案与我一起工作......但是我需要添加它，也可以调整包含正在编辑的文本的div的大小（仅在不使用下面的行时被调整大小的容器）：

$('.nicEdit-main').width('100%');

.

Answer 4

$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next()
    .width($('.nicEdit-panelContain').parent().width()-2);

.

如果textarea的父级具有prop“填充左”或“填充 - 右”，则添加“-2”至“宽度”。

Answer 5

这对我来说最适用：

new nicEditor().panelInstance('nic-me');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');

.

Answer 6

解决我的案子！ 谢谢

$(document).ready(function(){
        bkLib.onDomLoaded(function() {
        new nicEditor({fullPanel : true, maxHeight:100}).panelInstance('myArea');
        $('.nicEdit-panelContain').parent().width('100%');
        $('.nicEdit-panelContain').parent().next().width('98%');
        $('.nicEdit-main').width('100%');
        });
    });

.

Answer 7

对于那些有同样问题的人，我优化了它，它看起来完全正常：

$(document).ready(function(){
    bkLib.onDomLoaded(function() {
        new nicEditor({fullPanel : true}).panelInstance('myArea');
        $('.nicEdit-panelContain').parent().css({width:'100%', padding:"0"});
        $('.nicEdit-panelContain').parent().next().css({width:'100%', padding:"5px"});
        $('.nicEdit-main').css({width:'100%', padding:"0", minHeight:"80px"});
    });
});

.