Question

我正在尝试将NicEdit编辑器用于隐藏在div中的textarea。当用户单击按钮时，将显示目标textarea的父div。 textarea的宽度设置为父div的100％。问题是父div被隐藏，因此textal在显示父div之前没有宽度。如果我尝试在显示它的父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

就我而言，这适用于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 2

@Hans的答案和我一起工作......但是我需要添加这个来调整包含正在编辑的文本的div的大小（只有在不使用下面的行时调整了div周围的容器）：< / p>

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

Answer 3

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

添加＆＃34; -2＆＃34;到＆＃34;宽度＆＃34;如果textarea的父母有道具＆＃34; padding-left＆＃34;或＆＃34; padding-right＆＃34;。

Answer 4

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

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

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

Answer 8

在面板上尝试了多种内容之后，调整了大小。.这对我有用。

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

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

Hidden Div中的NicEdit调整得很小

8 个答案: