勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/18  jQuery JavaScript

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

 

サンプル

未対応版

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の値は適宜変更する。

 

参考サイト

https://stackoverflow.com/questions/11704769/nicedit-in-hidden-div-is-resized-small

 - jQuery JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...