隐藏分区中的NicEdit大小较小

NicEdit in Hidden Div is resized small

本文关键字：NicEdit 分区 隐藏      更新时间：2024-03-31

我正在尝试对div中隐藏的文本区域使用NicEdit编辑器。当用户单击按钮时，目标文本区域的父div就会显示出来。textarea的宽度设置为父div的100%。问题是父div被隐藏，因此在显示父div之前textarea没有宽度。如果我试图在显示其父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%？

在我的案例中，这与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');

@Hans的回答对我很有用。。。但我也需要添加这一点来调整包含正在编辑的文本的div的大小（当不使用下面的行时，只有该div周围的容器被调整了大小）：

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

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

如果文本区域的父对象具有道具"padding-left"或"padding-right"，则将"-2"添加到"width"。

这对我来说效果最好：

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

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

或者可以找到它的父div的像素宽度，并将其设置为该宽度。

这解决了我的问题！感谢

$(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%');
        });
    });

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

$(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"});
    });
});

在面板上尝试多个东西后，调整大小。。这对我很有效。

bkLib.onDomLoaded(function() {
    new nicEditor().panelInstance('textarea_id');
    document.querySelector('div[unselectable="on"]').setAttribute('style', '');
});

基本上只是在加载时删除nicEdit脚本设置的默认宽度，它应该自动调整面板宽度。。

相关文章：