NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

2022/04/06

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み込み時は「display:none」で非表示にしており、ボタンを押すとページはリロードせずにNicEditを表示するという仕様。尚且つNicEditに対して「width:100%」を割り当てていた。このような状況でボタンを押すと表示はされても横幅がブラウザ幅100%にならなかった。以下に対応方法をメモ。

1 サンプル
2 ソースコード
3 参考サイト

サンプル

未対応版

https://taitan916.info/sample/NicEdit/

対応版

https://taitan916.info/sample/NicEdit/index2.php

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NicEdit</title>
<style>
textarea{
width: 100%;
height: 200px;
}
</style>
</head>
<body>

    <div id="hide" style="display: none;">
        <textarea name="nicedit" id="nicedit"></textarea>
    </div>

    <a href="javascript:void(0);" id="show">NicEdit表示</a>

    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="./nicEdit_ja/nicEdit.js"></script>
    <script type="text/javascript">
    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
    $(function(){
        $('#show').click(function(){
            $('#hide').show();
            $(this).hide();

            $('.nicEdit-panelContain').parent().width('100%');
            $('.nicEdit-panelContain').parent().next().width('100%');
            $('.nicEdit-main').css({width:'100%', padding:"0", minHeight:"200px"});
        });
    });
    </script>
</body>
</html>

29～31行目が対応策となる。31行目のminHeightの値は適宜変更する。