6

我正在尝试将 NicEdit 编辑器用于隐藏在 div 中的文本区域。当用户单击一个按钮时，目标文本区域的父 div 就会显示出来。textarea 的宽度设置为父 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%？

4

8 回答 8

12

就我而言，这适用于 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');
于 2012-08-17T06:59:48.537 回答
2

@Hans 的答案与我一起工作......但我还需要添加它来调整包含正在编辑的文本的 div 的大小（当不使用下面的行时，只有该 div 周围的容器被调整大小）：

$('.nicEdit-main').width('100%');
于 2013-10-04T01:43:50.020 回答
2 
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next()
    .width($('.nicEdit-panelContain').parent().width()-2);

如果 textarea 的父级具有道具“padding-left”或“padding-right”，则将“-2”添加到“width”。

于 2016-07-27T21:03:44.517 回答
2

这对我最有效：

new nicEditor().panelInstance('nic-me');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');
于 2018-04-13T15:13:47.840 回答
1

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

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

于 2012-07-28T22:01:55.273 回答
0

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

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

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

于 2020-12-11T23:51:16.483 回答
0

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

$(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"});
    });
});
于 2019-06-06T07:27:58.383 回答
0

这解决了我的情况！谢谢

$(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%');
        });
    });
于 2019-01-14T16:57:41.703 回答