6

divに隠されたテキストエリアにNicEditエディターを使用しようとしています。ユーザーがボタンをクリックすると、ターゲットのテキストエリアの親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の親にprop"padding-left"または"padding-right"がある場合は、"width"に"-2"を追加します。

于 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

これで私の場合は解決します！ありがとう

$(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 に答える
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

パネルのサイズ変更で複数のものを試した後..これは私のために働いた..

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

基本的に、ロード時にnicEditスクリプトによって設定されているデフォルトの幅を削除するだけで、パネルの幅が自動的に調整されます。

于 2020-12-11T23:51:16.483 に答える