勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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

  関連記事

javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

迷惑メール対策でフォームにreCAPTCHAを導入する方法

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

jQuery Nice Selectを特定ページのみ無効にしたい

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...